jQuery: ziehbar sortierbar verbinden. ziehbar Element hat einen anderen DOM aus sortierbare Liste

Question

Ich bin jetzt in der Lage, ein Element zu einem sortierbar zu ziehen. Aber die sortierbare Liste hat einen anderen DOM.

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

Der Helfer hat dies:     xxx Dies sollte in den sortierbar fallen gelassen werden ...

Die "Helfer" funktioniert. Aber wenn ich das Element in die sortierbar „fallen gelassen“, es kehrt nur zurück zum „Original“ DOM. Ich würde die „neu geschaffenen DOM“ wollen (die in Helfer erstellt) in die sortierbare fallen gelassen werden.

Ich hoffe, dass ich Sinn mache. Vielen Dank!

Eine andere Möglichkeit, es zu sagen: wenn ich einen Apfel ziehen, stellt sich jetzt in eine Orange. aber wenn ich es fallen lassen, es dreht sich wieder in einen Apfel ..

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