jQuery यूआई draggable तत्व sortable में गिरा दिया - जावास्क्रिप्ट, jquery, jquery-ui, draggable, droppable

मेरे पास ड्रैग करने योग्य वस्तुओं की एक सूची है, और मैं उन्हें एक छांटने योग्य सामग्री ब्लॉक पर खींचने में सक्षम होना चाहता हूं। यहाँ मेरा मार्कअप है:

<div class="items">
<div class="one">One</div>
<div class="two">Two</div>
</div>

<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>

बात यह है कि, मैं चाहता हूं कि घसीटा गया आइटम जल्द से जल्द "ब्लॉक" हो जाए क्योंकि खींचना शुरू होता है और जब वह गिरा होता है तो ब्लॉक रहता है। मैंने यह कोशिश की है:

$(".items div").draggable({
helper: function(e) {
return $("<div>").addClass("block").text( $(e.target).text() );
},
connectToSortable: ".content"
});

$(".content").sortable();​

बेला: http://jsfiddle.net/MF4qu/

लेकिन भले ही मैं एक कस्टम सहायक बनाता हूं जो दिखता हैब्लॉक की तरह, यह ड्रॉप होते ही मूल ड्रैग किए गए तत्व पर वापस लौट जाता है। क्या कोई जानता है कि मेरे उदाहरण पृष्ठ में ब्लॉक को ठीक से कैसे डाला जाए? मैंने पहले ही UI API के माध्यम से देखा था लेकिन मैं इसका पता नहीं लगा सकता।

​

उत्तर:

जब ड्रैग करने योग्य तत्व को छंटनी में छोड़ा जाता है, तो यह छंटनी को ट्रिगर करता है update प्रतिस्पर्धा। एक समाधान उस घटना को सुनना है, और एक आइटम को ब्लॉक में बदलना है:

$(".items div").draggable({
helper: function(e) {
return $("<div>").addClass("block").text( $(e.target).text() );
},
connectToSortable: ".content"
});

$(".content").sortable({
update: function (event, ui) {
ui.item.addClass("block");
}
});​

कार्य डेमो: http://jsfiddle.net/DaXuT/1/