4

コンテナの外にドラッグしたときにjqueryUI要素が消えるようにしたい。

たとえば、次のリストが1つあるとします。

<div class="myfavoritecontainer">
   <ul class="sortable">
   <li>item1</li>
   <li>item2</li
  </ul> 
</div>

そして、sortableはjquery ui sortableに変わります...さて、これらのアイテムをソートリストからドラッグすると、それらを非表示にします...達成するための最良の方法は何ですか？

私がやろうとしていることの少しの説明：このjsfiddleを参照してください：http：//jsfiddle.net/nveid/kQmWt/4/

基本的に、右側のリストのアイテムを左側のリストに追加します（その部分は完了です！）。次に、左側のリストの外側にドラッグすると、リストの左側のアイテムを非表示にします。左側のコンテンツをドラッグしているときにjsコンソールを見ると、私が達成しようとしていることがよくわかります。しかし、マウスの左がトリガーされた直後にmouseenterがトリガーされているため、私はそれを達成していません。イベントのトリガーが発生している正確な理由はわかりませんが、フィドルはいくつかの説明を与える必要があります。

できれば、divコンテナの外側の左側にあるアイテムをマウスでドラッグするとすぐに消えるようにすることができますが、元の場所に戻った後、liアイテムは消えますが、 mouseenter/mouseleaveイベントが正しく機能していません。

4

1 に答える 1

9

beforeStopを使用してアイテムを削除し、コンテナの境界の外に移動したかどうかを判断するために、オーバーとアウトに基づいて番兵を維持する必要があるようです。私はこれをここの前の投稿に基づいています：Jqueryソート可能、ドラッグアウトして現在のアイテムを削除します

jsFiddleの編集は、並べ替え可能な定義では次のようになります。

        over: function(e, ui) { sortableIn = 1; },
        out: function(e, ui) { sortableIn = 0; },
        beforeStop: function (event, ui) {
            newItem = ui.item;
            if (sortableIn == 0) { 
              ui.item.remove(); 
           }
        },
于 2012-08-12T02:07:30.433 に答える