2

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();
                }
            }
        });
4

1 に答える 1

0

私はあなたのコードを少し修正しましたが、今はうまくいきます。トリックは、単一の要素ではなくコンテナにdraggableand機能を設定することです: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/

于 2013-05-21T16:11:37.237 に答える