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/

使用项目排序并拖放以进行删除

1 个答案: