JQuery Sortable Connect के साथ काम नहीं करते

Question

मेरे पास दो क्रमबद्ध सूचियां हैं। मैं इस सूचियों को जोड़ना चाहता हूं ताकि मैं दोनों दिशाओं में वस्तुओं को एक सूची से दूसरे में स्थानांतरित कर सकूं। मैं क्रमबद्ध कनेक्ट का उपयोग करता हूं, लेकिन फिर भी मैं सूची आइटम को एक से दूसरे सूची में स्थानांतरित नहीं कर सकता।

इसके अलावा मैं वस्तुओं को एक स्थान से दूसरे स्थान पर ले जाने में सक्षम हूं लेकिन उसी सूची में।

<div class="category-container" data-id="1"> 
    <div class="category-header" data-id="1"> 
    </div> 
    <ul class="list-items ui-sortable"> 
     <li class="item" data-id="3"> 
     <li class="item" data-id="43"> 
     <li class="item" data-id="28"> 
     <li class="item" data-id="24"> 
     <li class="item" data-id="21"> 
     <li class="item new" data-id="0"> 
    </ul> 
</div> 
<div class="category-container" data-id="2"> 
    <div class="category-header" data-id="2"> 
    </div> 
    <ul class="list-items ui-sortable"> 
     <li class="item" data-id="17"> 
     <li class="item" data-id="8"> 
     <li class="item" data-id="9"> 
     <li class="item new" data-id="0"> 
    </ul> 
</div> 

और JQuery:

$(".list-items").sortable({ 
      connectWith: '.list-items', 
      items: "li:not(.item.new)", 
      placeholder: 'place-holder', 
      scroll: false, 
      tolerance: "pointer" 
}).disableSelection(); 

मुझे पता नहीं कर सकते समस्या है क्या

यहाँ कोड है।

क्या कोई मेरी मदद कर सकता है?

धन्यवाद

Answer 1

मुझे पता चला।

समस्या सूची फ्लोट संपत्ति थी। क्रमबद्ध कनेक्ट सीएसएस फ्लोट के साथ काम नहीं करते हैं।

Sortable connectWith Bug

Answer 2

ठीक है, मेरे लिए सूची सिर्फ काम करता है के रूप में उम्मीद .. इस जाँच करें: http://jsfiddle.net/GSA2A/2/

इसके अलावा, आप, वैध HTML लिखना चाहिए कम से कम .. अधिकतर ब्राउज़र संभाल कर सकते हैं बंद कर दिया लापता अपने टैग बंद ली-तत्व आप किस डक्ट टाइप का उपयोग कर रहे हैं इसके आधार पर।

तुम भी उपयोग कर सकते हैं:

$('#list1, list2').sortable({....... 

मेरे लिए बेहतर और अधिक तार्किक लगता है आईडी और connectWith उन सूचियों के संयोजन एक वर्ग पर पर इस्तेमाल किया sortable समारोह है।

Answer 3

मैं एक आईडी

<ul id="list"> 
 
    <li>School</li> 
 
    <li>Name</li> 
 
    <li>Roll</li> 
 
</ul> 
 
<ul id="thi"> 
 
    <li>School</li> 
 
    <li>Name</li> 
 
    <li>Roll</li> 
 
</ul> 
 
\t 
 
<div id="fdk"> 
 
</div>

और jQuery फ़ाइल में मैं दोनों के साथ आईडी हो और sortable() का उपयोग करने के लिए दोनों उल बताए कर रहा हूँ; विभिन्न मापदंडों लागू करते हैं और यह आपको मैं jQuery-3.1.1.js उपयोग कर रहा हूँ इस कोड का उपयोग कर सकते हैं मेरे लिए काम कर रहा है, तो आप नियंत्रण को जोड़ने का प्रयास: 'दस्तावेज़'

$('#list, #thi').sortable({ 
 
    containment:'document', 
 
    tolerance:'pointer', 
 
    cursor:'pointer', 
 
    revert:true, 
 
    opacity:0.4, 
 
    connectWith:'#list,#thi', 
 
    update: function() { 
 
     // alert('f'); 
 
     content = $(this).text(); 
 
     $('#fdk').text(content); 
 
    } 
 
});

Answer 4

मैं बस कुछ ऐसा साझा करना चाहते हैं जिसे मैंने अभी महसूस किया है और शायद किसी की मदद कर सकता है।

तत्व है जो एक और सूची/तालिका से एक तत्व (div/उल) प्राप्त होगा पर्याप्त "अंतरिक्ष" होना आवश्यक है (चौड़ाई और ऊंचाई) प्राप्त हो जाएगा और नए तत्व प्रदर्शित करने के लिए।