jQuery: sortable करने के लिए draggable कनेक्ट। ड्रैगगेबल आइटम में क्रमबद्ध सूची

Question

से एक अलग डीओएम है, अब मैं एक आइटम को क्रमबद्ध करने में सक्षम हूं। लेकिन क्रमबद्ध सूची में एक अलग डोम है।

<!-- The draggable items. Has the "original" DOM in the LI tags. --> 
<ul class="draggable_text"> 
    <li><span>DRAG THIS A</span></li> 
    <li><span>DRAG THIS B</span></li> 
</ul> 


<!-- This list has a different DOM in the LI tags --> 
<ul id="stagerows"> 
    <li><p>This is a new DOM dragged from "DRAG THIS A"</p></li> 
    <li><p>This is a new DOM dragged from "DRAG THIS B"</p></li> 
</ul> 

$(document).ready(function() { 
    $('.draggable_text > li').draggable({ 
     //helper:'clone', 
     helper: function(event, ui) { 
      return '<div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;">xxx</div>'; 
     }, 
     connectToSortable:'#stagerows' 
    }); 

    $('#stagerows').sortable({ 
     handle: '.drag_handle' 
    }); 
}); 

हेल्पर इस है: xxx यह sortable में गिरा दिया जाना चाहिए ...

"सहायक" काम करता है। लेकिन जब मैंने आइटम को क्रमबद्ध में "गिरा दिया", तो यह वापस "मूल" डोम पर वापस आ गया। मैं चाहता हूं कि "नव निर्मित डोम" (सहायक में बनाया गया एक) क्रमबद्ध में गिरा दिया जाए।

मुझे आशा है कि मैं समझ में आ रहा हूं। धन्यवाद!

यह कहने का एक और तरीका: जब मैं एक सेब खींचता हूं, तो यह अब एक नारंगी में बदल जाता है। लेकिन जब मैं इसे छोड़ देता हूं, तो यह एक सेब में बदल जाता है ..

Answer 1

$('.draggable_text > li').draggable({ 
    helper: function(event, ui) { 
     var type = $(this).find('.link_type').val(); 
     return create(type,0); 
    }, 
    connectToSortable:'#stagerows' 
}); 

$('#stagerows').sortable({ 
    handle: '.drag_handle', 
    placeholder: 'placeholder_sortable' 
}); 

/** 
* When item is dropped from the Add <Stuff> 
*/ 
$('#stagerows').droppable({ 
    drop: function(event, ui){ 
     type = ui.draggable.find('.link_type').val(); 
     ui.draggable.empty(); 
     return ui.draggable.html(create(type,0)) 
    } 
});