24

編集: ここに私のサンプル コードを示すリンクがあります: 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();

これは完全に機能します。しかし、コードだけを使用して「ドラッグ アンド ドロップ」をシミュレートできる必要があります。私はほとんど動作していますが、問題は発生しているイベントが placeholder events であることです。

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

2 に答える 2

30

それについての質問が JQuery フォーラムにあります。執筆時点では解決されていませんが、今後さらに情報が追加される可能性があります。

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

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

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 に感謝します。

于 2011-01-05T15:26:37.603 に答える
3

かなりうまくいく解決策を見つけました。という関数をドロップ イベントで呼び出しますonDragAndDrop()。draggableこの関数は、 jQuery オブジェクトと jQuery オブジェクトの 2 つの引数を取りdroppableます。

$('.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);
    }

単体テスト用の使いやすい優れたソリューションであることがわかりました。おそらく、キーボードでアクセス可能なフォールバックにも使用することになるでしょう。

于 2015-10-02T22:21:00.223 に答える