jquery可拖动非列表项到可排序列表

Question

这似乎微不足道，但我还是在这里。下面的代码是一个带有可排序列表的简单拖放。我想做的是对删除的元素做一些工作。在此示例中，放入的项目是一个 div。我想做的工作是创建一个新的列表项，其中包含 div。

有什么帮助吗？

<script>
$(function(){
    $(".sortable").sortable();
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
    }); 
}
</script>
<div class="draggable">DRAG ME</div>
<ul class="sortable">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
</ul>

这是我也尝试过的一些东西

<script>
$(function(){
    $(".sortable").sortable({
        receive: function(event, ui) { 
            ui.item = $("<li></li>").append(ui.item);
        }
    });

    $('.sortable').droppable({
        drop: function(event, ui){
            ui.draggable = $("<li></li>").append(ui.draggable);
        }
    });
}
</script>

Answer 1

您需要在可排序上使用stop事件:

$(".sortable").sortable({
   stop: function(event, ui)
   {
      if (ui.item.is('div.draggable'))
         ui.item.replaceWith($('<li>' + ui.item.text() + '</li>'));
   }
});

学习引用:stop事件

一个类似的问题有助于找到答案:Using jQuery UI drag-and-drop: changing the dragged element on drop