डीओएम मैनिपुलेशन

Question

के लिए एक ही समय में JQuery ड्रैगगेबल ड्रॉपपेबल और सॉर्ट करने योग्य I JQuery UI का उपयोग करके somme प्रकार के ड्रैग और ड्रॉप wysiwyg संपादक को सेट करने का प्रयास कर रहा हूं।

मैंने सफलतापूर्वक तत्वों को स्थापित किया है लेकिन उनके पास एक अजीब व्यवहार है।

निरंतर झटके की वजह से वस्तुओं को सॉर्ट करना लगभग असंभव है।

मैं सेटअप इस तरह मेरी draggables:

el.draggable({ 
    containement:'.main-form-container', 
    revert: "invalid", 
    connectToSortable: '.sortable' 
}).disableSelection(); 

मुझे नहीं सेट के रूप में खींचने योग्य sortable पर ही प्लेसहोल्डर स्थापित करेंगे तो! क्यूं कर?

कभी-कभी जब किसी तत्व को दूसरे में गिरा दिया जाता है तो यह एक ड्रैग करने योग्य तत्व बन जाता है और एक साथ चिपके हुए प्रतीत होता है।

update: function (event, ui) { 
     $(ui.item).css({ 
      position: 'relative', 
      top:0, 
      left:0, 
      width: 'auto' 
     }); 

     // init droppable draggable and sortable on this item 
     setupDandD($(ui.item)); 
    } 

और setupDandD विधि: यह है कि sortable अद्यतन अधिभावी साथ तय लगता है

setupDandD($('.form-container')); 

    function setupDandD(el) { 
     el.draggable({ 
      containement:'.main-form-container', 
      revert: "invalid", 
      connectToSortable: '.sortable' 
     }).disableSelection(); 

     el.droppable({ 
      accept: '[data-section="toolbox"]', 
      greedy: true, 
      hoverClass: 'droppable-hovered', 
      drop: handleDrop 
     }).disableSelection(); 

     el.filter('.sortable').sortable({ 
      tolerance:'pointer', 
      containement:'.main-form-container', 
      connectWith: ".sortable:not(#" + $(this).id + ")", 
      revert: 'invalid', 
      helper: function() { 
       return $(this); 
      }, 
      update: function (event, ui) { 
       console.log('here'); 
       $(ui.item).css({ 
        position: 'relative', 
        top:0, 
        left:0, 
        width: 'auto' 
       }); 
       setupDandD($(ui.item)); 
      } 
     }).disableSelection(); 
    }; 

मुझे लगता है मैं sortable पर कहीं किसी घटना पिक करने की जरूरत है, लेकिन मैं काफी अब खो रहा हूँ ...

Answer 1

अच्छी तरह से! मुझे यह मिला!

वास्तव में मेरी सबसे बड़ी गलती एक ही समय में ड्रॉप करने योग्य और क्रमबद्ध मिश्रण करना था। मुझे connectToSortable विकल्प सेट के साथ सॉर्टेबल और ड्रैगगेबल्स का उपयोग करना पड़ा।

मेरे पास अजीब व्यवहार था जो खुद को सम्मिलित करने की कोशिश कर रहा था। ऐसा इसलिए है क्योंकि सॉर्ट करने योग्य "कनेक्टविथ" एक चयनकर्ता को सेट किया गया था जो स्वयं को लौटाता था और इसके लिए खींचने पर तुरंत प्लेसहोल्डर को स्वयं पर रखा जाता था। वास्तव में काफी तार्किक!

इस पर काबू पाने के लिए मैंने बस प्रत्येक बच्चे को एक div के साथ क्रमबद्ध किया। यह div को एक क्रमबद्ध वस्तु बनाता है और स्वयं को घटनाओं को ट्रिगर करने से रोकता है।

ड्रैगगेबल + सॉर्टेबल का उपयोग करते समय ध्यान में रखना एक बात यह है कि सॉर्ट करने योग्य ऑब्जेक्ट को तब क्लोन कर देगा जब ड्रैग शुरू हुआ था। मतलब यह है कि यदि आप ड्रैगगेबल पर एक कस्टम सहायक का उपयोग करते हैं, तो भी यह मूल आइटम डालेगा। इसके लिए मैं एक अगर यह मेरी टूलबॉक्स से आया है मैं चाहता था द्वारा sortable की "रोक" घटना में आइटम को बदलने के लिए किया था: http://jsfiddle.net/jmorvan/ag659/

मुझे पता है:

$('.main-form-container').sortable({ 
    placeholder: "sortable-placeholder", 
    opacity: .35, 
    connectWith: ".sortable", 
    stop: function (e, t) { 

     if (t.item.attr('data-section') == "toolbox") { 
      $(t.item).replaceWith(createContainer()); 
     } 

     $(".sortable").sortable({ 
      opacity: .35, 
      placeholder: "sortable-placeholder", 
      connectWith: ".sortable" 
     }).disableSelection(); 
    } 
}).disableSelection(); 

और यहाँ काम कर रहे बेला है सॉर्ट करने योग्य/ड्रैगगेबल में कुछ शायद अनियंत्रित घटना को ओवरराइड करके शायद आखिरी फिक्स करने का एक क्लीनर तरीका है, लेकिन यह मेरे लिए चाल है!