jQuery：可拖动连接到可排序。可拖动项目与可排序列表具有不同的 DOM

Posted 2023-05-08

【中文标题】jQuery：可拖动连接到可排序。可拖动项目与可排序列表具有不同的 DOM

【英文标题】：jQuery: draggable connect to sortable. draggable item has a different DOM from sortable list

【发布时间】：2010-10-18 23:31:00

【问题描述】：

我现在可以将一个项目拖到一个可排序的地方。但是可排序列表具有不同的 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'
    );
);

助手有这个： xxx 这应该被放入可排序的...

“帮手”有效。但是当我将项目“放入”可排序时，它只是恢复到“原始”DOM。我希望将“新创建的 DOM”（在帮助程序中创建的 DOM）放入可排序中。

我希望我说得通。谢谢！

另一种说法： 当我拖动一个苹果时，它现在变成了一个橙色。但是当我放下它时，它又变回了一个苹果..

【参考方案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))
    
);