jquery - プログラムで jQuery ドラッグ操作を中止するにはどうすればよいですか?

Question

プログラムで jQuery ドラッグ操作を中止するにはどうすればよいですか?

jQuery UI を使用して、ユーザーはドラッグ操作を開始します。ドラッグ中に、ドラッグされた要素を削除する非同期イベントが発生します (たとえば、タイマーベースの更新)。更新では、削除された要素からのエラーを回避するために、更新の前に次のようなことをしたいと思います:

   element.trigger('dragstop');

しかし、それはうまくいかなかったようです。

Answer 1

これは、ドラッグまたはドロップ イベントのコールバック関数 (false を返す) を使用して行うことができます。http://jqueryui.com/demos/draggable/#event-dragを参照してください。

Answer 2

ドラッグ中にドラッグをキャンセルすることは、jQuery UI では「設計上」[1] 正式には許可されていません。状況には同意しませんが、そのままです。

飛行中のドラッグをある程度確実にキャンセルしたい場合は、いくつかのハックを組み合わせる必要があります [2, 3]:

$( window ).keydown( function( e ){
  if( e.keyCode == 27 ) {
    var mouseMoveEvent = document.createEvent("MouseEvents");
    var offScreen = -50000;

    mouseMoveEvent.initMouseEvent(
      "mousemove", //event type : click, mousedown, mouseup, mouseover, etc.
      true, //canBubble
      false, //cancelable
      window, //event's AbstractView : should be window
      1, // detail : Event's mouse click count
      offScreen, // screenX
      offScreen, // screenY
      offScreen, // clientX
      offScreen, // clientY
      false, // ctrlKey
      false, // altKey
      false, // shiftKey
      false, // metaKey
      0, // button : 0 = click, 1 = middle button, 2 = right button
      null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout).
            // In other cases, pass null.
    );

    // Move the mouse pointer off screen so it won't be hovering a droppable
    document.dispatchEvent(mouseMoveEvent);

    // This is jQuery speak for:
    // for all ui-draggable elements who have an active draggable plugin, that
    var dragged = $('.ui-draggable:data(draggable)')
      // either are ui-draggable-dragging, or, that have a helper that is ui-draggable-dragging
      .filter(function(){return $('.ui-draggable-dragging').is($(this).add(($(this).data('draggable') || {}).helper))});

    // We need to restore this later
    var origRevertDuration = dragged.draggable('option', 'revertDuration');
    var origRevertValue = dragged.draggable('option', 'revert');

    dragged
      // their drag is being reverted
      .draggable('option', 'revert', true)
      // no revert animation
      .draggable('option', 'revertDuration', 0)
      // and the drag is forcefully ended
      .trigger('mouseup')
      // restore revert animation settings
      .draggable('option', 'revertDuration', origRevertDuration)
      // restore revert value
      .draggable('option', 'revert', origRevertValue);
  }
}

さて、これはきれいではありません。しかし、それは機能します。受け入れるドロッパブルをホバリング中にキャンセルする場合でも。

それを楽しんでください。

[1] - http://bugs.jqueryui.com/ticket/8414
[2] - https://gist.github.com/3517765
[3] - https://forum.jquery.com/topic/how-ドラッグ中のドラッグをキャンセルするには

Answer 3

@FerRoryが示唆するように、このイベントを利用できますdrag。

メソッドを利用してdata()、要素がドラッグ可能かどうかを判断できます。

$("div").draggable({
    drag: function() {
       return !$(this).data("disabledrag");
    },
    revert: true
});

次に、非同期アクションで、ドラッグされている要素が削除された要素である場合、そのデータを設定できます（DOM要素をサーバーからのデータに関連付けるためのシステムがあると仮定しています）：

var $dragging = $(".ui-draggable-dragging");
if ($dragging.length) {
    // If this is the item that was deleted, stop dragging:
    if ($dragging.attr("id") === "item-one") {
        $dragging.data("disabledrag", true);
        $dragging.addClass("deleted").html("This item has been deleted!");            
    }
}

ここで私の例を更新しました。最初のdivものは 5 秒後に「削除」されます。