web-dev-qa-db-ja.com

jQuery：コードでドラッグアンドドロップをシミュレートするにはどうすればよいですか？

編集：これが私のサンプルコードを表示するためのリンクです： http://www.singingeels.com/jqtest/

Jquery-1.3.2.js、ui.core.js（最新バージョン）およびui.draggable.js（これも最新バージョン）を参照する非常に単純なページがあります。

私は非常に簡単にドラッグできるdivを持っています（もちろんマウスを使用して）：

<div id="myDiv">hello</div>

そしてJavaScriptで：

$("#myDiv").draggable();

これは完全に機能します。ただし、コードのみを使用して「ドラッグアンドドロップ」をシミュレートできる必要があります。 ほとんど機能していますが、問題は、発生しているイベントがプレースホルダーイベントであるということです。

「ui.core.js」を開いて一番下までスクロールすると、次のように表示されます。

// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }

シミュレーションでイベントが適切に拡張されないのはなぜですか。マウスでクリックすると、拡張されます。 -_mouseDrag：プロパティを「ui.draggable.js」のオーバーライド拡張機能に強制的に従わせる方法についてのアイデアはありますか？

これを解決することは非常に大きなことです-そして私は後で主要な利点を示すことを計画しています。

ありがとう、-ティモシー

編集：これが私のサンプルコードを表示するためのリンクです： http://www.singingeels.com/jqtest/

編集2：上のリンクをクリックしてソースを表示...私がやろうとしていることがわかります。スニペットは次のとおりです。

$(document).ready(function() {
    var myDiv = $("#myDiv");

    myDiv.draggable();

    // This will set enough properties to simulate valid mouse options.
    $.ui.mouse.options = $.ui.mouse.defaults;

    var divOffset = myDiv.offset();

    // This will simulate clicking down on the div - works mostly.
    $.ui.mouse._mouseDown({
        target: myDiv,
        pageX: divOffset.left,
        pageY: divOffset.top,
        which: 1,

        preventDefault: function() { }
    });
});
jqueryjquery-uidrag-and-dropdraggable
21
Timothy Khouri

それについてのJQueryフォーラムでの質問 があります。これを書いている時点では解決されていませんが、将来さらに多くの情報が得られる可能性があります。

編集：フォーラムで回答されました：

JQueryUIがドラッグアンドドロップの単体テストに使用するシミュレーションプラグインを使用することをお勧めします。

https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

単体テストを見ると使用例がわかります

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js

そのためのrdworthに感謝します。

29
StuperUser

私はかなりうまく機能する解決策を見つけました。 dropイベントにonDragAndDrop()という関数を呼び出させます。この関数は、draggablejQueryオブジェクトとdroppablejQueryオブジェクトの2つの引数を取ります。

$('.my-drop-target').droppable({
    drop: function(event, ui) {
        onDragAndDrop(ui.draggable, $(event.target));
    }
});

私のテストでは、onDragAndDropを直接呼び出す関数がありますが、マウスを持っているユーザーがそのアクションを実行できることを確認します。

    var simulateDragAndDrop = function(draggable, droppable) {
        if (!draggable.data('uiDraggable')) {
            throw new Error('Tried to drag and drop but the source element is not draggable!');
        }
        if (!droppable.data('uiDroppable')) {
            throw new Error('Tried to drag and drop but the target element is not droppable!');
        }
        onDragAndDrop(draggable, droppable);
    }

私はそれがユニットテストのための素晴らしくて使いやすい解決策であるとわかりました。おそらく、キーボードでアクセス可能なフォールバックにも使用することになります。

3
Patrick McElhaney