jquery ui ड्रैग ड्रॉप + क्रमबद्ध

Question

मैं ड्रैग करने और क्रमबद्ध करने की कोशिश कर रहा हूं। मैं div 1 से 2 तक और div 2 से div 1 तक खींच सकता हूं, लेकिन क्योंकि मैं क्लोन का उपयोग करता हूं, मुझे क्रमबद्ध काम नहीं मिल सकता है।

कोई भी विचार?

$(document).ready(function() { 

    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 

      $(".qitem").draggable({ 
       containment : "#container", 
       helper : 'clone', 
       revert : 'invalid' 
      }); 
     } 
    }); 
}); 

लाइव डेमो: http://jsfiddle.net/6xXPq/4/

Answer 1

इस काम करने के लिए आप फिर से खींचने योग्य गिरा बॉक्स में आइटम नहीं हैं नहीं कर सकते, क्योंकि आप अगर यह या सॉर्ट करने के लिए कोशिश कर रहा था, खींचें पता नहीं है। Example JSFiddle

$(document).ready(function() { 
    $("#qselected").sortable(); 
    $("#qselected").disableSelection(); 

    $(".qitem").draggable({ 
     containment : "#container", 
     helper : 'clone', 
     revert : 'invalid' 
    }); 

    $("#qselected, #qlist").droppable({ 
     hoverClass : 'ui-state-highlight', 
     accept: ":not(.ui-sortable-helper)", 
     drop : function(ev, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 
     } 
    }); 
}); 

इस सही ढंग से काम करने के लिए प्राप्त करने के लिए आप ड्रॉप हैंडलर आइटम है कि हल कर किया जा रहा है, यह करने के लिए हम करने के लिए accept फ़िल्टर जोड़ें स्वीकार करने की अनुमति नहीं कर सकते हैं:

यहाँ कूट चल रहा है droppable हैंडलर:

accept: ":not(.ui-sortable-helper)", 

यह अब मतलब है कि आप शीर्ष करने के लिए नीचे बॉक्स के आइटम खींचें और फिर टॉप बॉक्स सॉर्ट कर सकते हैं। हालांकि अब आप शीर्ष बॉक्स के बाहर आइटम खींच नहीं सकते हैं।

आप एक नई विधि विकसित करने में उन्हें हटाने के लिए होगा

Answer 2

मैं एक ही सवाल है (यह शायद टॉप बॉक्स की खींचने योग्य/क्रमित करने योग्य कार्यक्षमता के बीच स्विच दूर करने के लिए एक ध्वज का उपयोग किया जा जा सकता है) और

$('#example-1-4 .sortable-list').sortable({ 
     connectWith: '#example-1-4 .sortable-list', 
     containment: '#containment' 
    }); 

: मैं इस article and demo

नहीं (डेमो बाहर की जाँच) का उपयोग करने खींचने योग्य और droppable, बस नीचे दिए गए कोड का उपयोग जरूरत पाया 210

कुंजी बिंदु विकल्प के साथ कनेक्ट करने योग्य() आशा है कि इससे मदद मिलती है।