使用jQuery从div中删除li

Question

我现在要在由另一个div拖动的div中添加项目，我希望当从选定项目div中拖动项目时，如果它位于同一div中，则它会还原或排序，但是如果我们从选定的项目div中拖动并从一些其他地方，然后它还会从选定的项目div中删除

基本上我想选择一个项目后添加删除选项

为了更好地理解这是jsfiddle

$(document).ready(function(){
    items = $('#items');
    selection = $('#selection');

    // selected items is sortable also

    selection.sortable({
        item: "li",
        containment: "document"
    });

//above div dragable
$('#items  li').draggable({
    revert: "invalid",
    containment: "document",
    appendTo: "body",
    helper: "clone"
 });    

//below div dropable
selection.droppable({
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        $( "<li class='sortable-item' data-name='"+ui.draggable.attr('data-name')+"'></li>" ).text( ui.draggable.text() ).appendTo(selection);

    }
}).sortable({
    items: "li",
    containment: "document"
   });
});

Answer 1

我认为这是你想要的。 您正在从选定的位置创建一个新li。 我认为您想分离它并将其附加到底部div。 即使您将数据附加到元素上，您也可以保留它，而不必担心数据名称问题。

//below div dropable
    selection.droppable({
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $(ui.draggable).detach().appendTo(selection);
        }
    }).sortable({
        items: "li",
        containment: "document"
    });