jQuery सॉर्ट करने योग्य

Question

के साथ ड्रॉप का पता लगाएं मैं नेस्टेड सूचियों को प्रदर्शित करने के लिए jQuery सॉर्ट करने योग्य (http://johnny.github.io/jquery-sortable/) के साथ खेल रहा हूं, तत्वों को स्थानांतरित करता हूं और फिर अंतिम परिणाम सहेजता हूं। अंतिम लक्ष्य ड्रैग & ड्रॉप संभावनाओं के साथ श्रेणियों और पृष्ठों को प्रदर्शित करके साइट संरचना/पदानुक्रम का प्रबंधन करना है।

सूची प्रदर्शित करना, तत्वों को खींचना और छोड़ना और आउटपुट को सहेजना ठीक काम करता है। अब मैं ड्रॉप इवेंट्स का पता लगाने के लिए जानना चाहता हूं कि कौन से तत्व स्थानांतरित किए गए हैं। यह मुझे पूरी साइट संरचना को अद्यतन करने से बचने में मदद करेगा जबकि केवल कुछ तत्व चले गए हैं।

मेरे नेस्टेड सूची इस प्रकार है:

<ol id="structure" class="tree serialization"> 
    <li class="placeholder-children ui-droppable"> 
    LABEL 
    <ol> 
     <li class="placeholder-children ui-droppable">LABEL</li> 
     <li class="placeholder-children ui-droppable">LABEL 
     <ol> 
      <li class="placeholder-children ui-droppable">LABEL</li> 
     </ol> 
     </li> 
    </ol> 
    </li> 
</ol> 

LI सभी droppable और खींचने योग्य हैं

सब कुछ के साथ आरंभ नहीं हो जाता:

<script> 
    $(function () 
    { 
     $("ol.tree").sortable(); 
    }) 
</script> 

अब कठिन हिस्सा आता है, मैं पता लगाने का प्रयास घटनाओं को छोड़ो।

के बाद एक सब पर काम नहीं करता:

$(".placeholder-children").droppable({ 
drop: function(event, ui) { 
alert('dropped'); 
} 
}); 
}); 

यह एक काम करता है लेकिन मेरा पेज जमा:

<script> 
$("ol.tree").sortable(
      { 
       group: 'serialization', 
       onDrop: function (item, container, _super) 
        { 
         alert('dropped!'); 
        } 
      }); 
</script> 

इस कोड की उम्मीद चेतावनी लेकिन खींच फ्रीज़ से चलाता है और मैं कर सकते हैं ' मेरी सूची में कुछ भी संशोधित नहीं करें। ऐसा लगता है कि पूरी स्क्रीन जमे हुए है क्योंकि मैं आगे नहीं बढ़ सकता या कुछ भी क्लिक नहीं कर सकता। मुझे पृष्ठ को फिर से लोड करने की आवश्यकता है।

नोट: अलर्ट के बिना, यह भी जम जाता है।

कोई विचार?

अद्यतन: मैं एक JSfiddle जोड़ लिया है: http://jsfiddle.net/t9mp80yw/ लेकिन मैं नहीं जानता कि कैसे .js फ़ाइल कॉल करने के लिए इतना है कि स्क्रिप्ट प्रारंभ किया जा सकता है। मैंने अपने सर्वर पर होस्ट की गई फ़ाइल को जोड़ने की कोशिश की है, लेकिन ऐसा लगता है कि jsfiddle बाहरी फ़ाइलों को स्वीकार नहीं करता है।

UPDATE2 मैं फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर, एक ही मुद्दे के साथ स्क्रिप्ट की कोशिश की है।

धन्यवाद एक बहुत

लॉरेंट

पुनश्च: यहाँ नहीं दिखाया लेकिन jQuery, jQuery यूआई, jQuery क्रमित करने योग्य सही ढंग से लोड किए गए हैं

Answer 1

onDrop समारोह आप कुछ काम करने की जरूरत है।

http://johnny.github.io/jquery-sortable/#nested

onDrop: function (item, container, _super) { 
    container.el.removeClass("active") 
    _super(item) 
} 

यह सुपर की तरह लग रहा से एक कॉलबैक कि यदि आप onDrop ओवरराइड कॉल किया जाना चाहिए है। इसके साथ अपने onDrop फ़ंक्शन को बदलें और यह काम करता है।

http://jsfiddle.net/xdjn2wqp/2/

एक नए पुस्तकालय में जानने के लिए सबसे अच्छा तरीका है उनके काम कर रहे उदाहरण कोड में से कुछ में पेस्ट और वहाँ से जाने के लिए है।