jQuery: connectrgable connect ل sortable. يحتوي Incrgable العنصر على قائمة DOM مختلفة من القائمة

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 يجب أن يتم إسقاط هذا في ...

يعمل "المساعد". ولكن عندما "أسقطت" العنصر في المرافق، فإنه يعود فقط إلى دوم "الأصلي". أريد أن يتم إسقاط "DOM تم إنشاؤها حديثا" (الذي تم إنشاؤه في المساعد) في المرافق.

آمل أن أكون منطقي. شكرا لك!

طريقة أخرى لقولها: عندما أسحب تفاحة، يتحول الآن إلى برتقالي. ولكن عندما أسقطها، فإنه يتحول إلى أبل ..

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))
    }
});