web-dev-qa-db-ja.com

Jqueryの並べ替え可能、ドラッグアウトして現在のアイテムを削除

私の問題：ソート可能なイベントが発生しました：リスト内の何かをドラッグしたとき、またはリストをソートしたときに発生します。しかし、アイテムをドラッグしたときにのみ関数を開始したいと思います。

私のコード

        $(document).ready(function ust()
        {    
            $('#div1').sortable({
                out: function(event, ui) { $('#nfo').append('OUT<br />'); }
            });

        });

実例 http://jsfiddle.net/FrbW8/22/

javascriptjqueryjquery-ui-sortable
23
Peter

これは、outコールバックのデフォルトの動作です。このjqueryuiを参照してください trac ticket

私は「論理的な」行動の概念に本当に同意しません。

「ただし、リストにドラッグしてからマウスを離すと、「out」コールバックがトリガーされることに注意してください（ただし、リストを超えていない場合はトリガーされません）。これは論理的な動作であり、通常の並べ替え可能オブジェクトでも発生します。 「」

4
redsquare

BeforeStopを使用してアイテムをインターセプトし、削除します。

receive: function(e, ui) { sortableIn = 1; },
over: function(e, ui) { sortableIn = 1; },
out: function(e, ui) { sortableIn = 0; },
beforeStop: function(e, ui) {
   if (sortableIn == 0) { 
      ui.item.remove(); 
   } 
}

（私はもともとGoogleでこれを見つけましたが、リンクを見つけることができなくなりました。そのため、ソースを参照しなかったことをお詫びします。）

37
Michael Finger

他のソリューションは、接続された並べ替え可能なリストでは機能しないようです。そのため、自分のケースに完全に機能する独自のソリューションを投稿しています。これは、要素がソート可能なリストの外にドロップされたときに「drop」イベントをキャプチャする「droppable」プラグインを利用します。

$('#div1').sortable({
    ....
}).droppable({greedy: true})

$('body').droppable({
    drop: function ( event, ui ) {          
        ui.draggable.remove();
    }
});

このアプローチの実際のjsfiddleは次のとおりです。 http://jsfiddle.net/n3pjL/

3
guilleva

this.element.find('.ui-sortable-helper').lengthを使用して、「ソートアウトイベント」と「ドロップアウトイベント」を区別します。並べ替えるとき、並べ替えられたアイテムのクラスはui-sortable-helperです。ドロップ後、（少なくとも私のスクリプトでは）ソートを再開するまで、他のui-sortable-classはありません。誰かを助けたいと思っています。

1
Newman