jquery-ui - 按项目排序并拖放删除

Question

我希望gp_item应该是可排序的，并且当拖放到gp_delete区域下时gp_item应该被删除。

当我这样做时，它要么工作排序要么删除。两者不合作。

<div id='container_gp'>
<div id='1' class='gp_item'> Graph 1</div>
<div id='2' class='gp_item'> Graph 2</div>
<div id='3' class='gp_item'> Graph 3</div>
</div>

<div id='gp_delete'>Drop to delete here </div>

我是这样写的。

$('.gp_item').draggable({   
            revert: true,
            proxy:'clone'

        });

$("#gp_delete").droppable({
            activeClass: "active",
            drop: function(event, ui) {
                if(confirm("Are you sure you wish to delete"))
                {
                    //delete code
                    ui.draggable.remove();
                }
            }
        });

Answer 1

我修改了一点你的代码，现在可以工作了，诀窍是在容器上设置draggable和特性，而不是在单个元素上：sortable

$('#container_gp').sortable({revert: 100}).draggable({
    revert: 'invalid',
    proxy: 'clone'
}).disableSelection()

$("#gp_delete").droppable({
    activeClass: "active",
    hoverClass: "ui-state-highlight",
    accept: '#container_gp div',
    drop: function (event, ui) {
        if (confirm("Are you sure you wish to delete")) {
            ui.draggable.remove();
        }
    }
});

工作小提琴：http: //jsfiddle.net/ckWKE/2/