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

Question

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

私は非常に単純なjqueryの - 1.3.2.jsを参照するページ、ui.core.js（最新版）とui.draggable.jsを持っています（最新のバージョン）。

私は（もちろんのマウスを使用して）私は非常に簡単に周りにドラッグすることができdiv要素があります。JavaScriptで

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

、その後を：

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

これは完璧な作品です。しかし、私は、コードだけでドラッグアンドドロップをシミュレートできる必要があります。 私はそれがほとんど働いていますが、問題は発砲しているイベントがプレースホルダーイベントだということです。

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

なぜイベントが私のシミュレーションで適切に拡張されていませんが、とき：あなたは「ui.core.js」を開き、一番下までスクロールすると

...あなたはこれを参照してくださいよあなたはマウスでクリックします、それらはありますか？ - _mouseDrag：プロパティを強制的に "ui.draggable.js"の上書き拡張に従う方法に関するアイデアはありますか？

これを解決することは巨大で、後で大きなメリットを示す予定です。

おかげで、 -Timothy

EDIT：http://www.singingeels.com/jqtest/

EDIT 2：ここではあなたに私のサンプルコードを表示するためのリンクだと上記のリンクとビューソースをクリックしますが...あなたは何を見ることができますIやろうとしている。スニペットは次のとおりです。

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

Answer 1

question in the JQuery forum about itがあります。これは執筆時点では解決されていませんが、将来的にはより多くの情報があるかもしれません。

---

EDIT：それはフォーラムで答えた：

：

私はあなたがjQueryのUIは、ユニットテストのドラッグ＆ドロップのために使用するものであるシミュレートプラグインを使用することをお勧めhttps://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

SEユニットを見て、そのためにrdworthする

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

感謝をテストします。

Answer 2

これを「シミュレートする」コードを表示する必要があります。私の直感は、適切なDOMイベントを構築して起動する必要がありますが、jQueryに人工イベントを注入する機能があるかどうかはわかりません。

イベントハンドラを直接呼び出すことはできますか？

Answer 3

非常にうまくいくソリューションが見つかりました。私はドロップイベントの呼び出しをonDragAndDrop()と呼ばれる関数を持っています。この関数は、draggable jQueryオブジェクトとdroppable jQueryオブジェクトの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); 
    } 

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