19

タイトルのとおり、javascript で HTML5 のドラッグ アンド ドロップ イベントをシミュレートしようとしています。

jquery.ui.simulate と、シミュレート関数hereを調べました。どちらも、jQuery UI オブジェクトで動作する mousedown、mousemove、および mouseup をシミュレートすることで、ドラッグ アンド ドロップをシミュレートするために使用できるようです。

しかし、ドラッグ アンドドロップ デモ サイトのようなページでのドラッグ アンド ドロップ イベントは、同じ方法を使用してシミュレートできないようです。マウスダウンをトリガーしても、ドラッグスタート HTML5 イベントが発生しないようです。

シミュレートするmousedown/mousemove/etcに基づいてdragstartイベントを発生させる方法はありますか、またはdragstart(そしてドロップ)イベントを直接シミュレートする方法はありますか?

SOにあるシミュレーション関数を変更して HTML5 ドラッグスタート イベントを追加しようとしたので、デモ ページで次のようなことを試すことができました。

 simulate( document.querySelector('#three'), 'dragstart')

しかし、シミュレートされたドラッグ開始イベントで dataTransfer オブジェクトを正しく作成する方法がわからないため、エラーが発生します。

基本的に、jquery.ui.simluate (または別のライブラリ) を使用するか、または変更されたバージョンのSOで見つけた関数をシミュレートします。

4

2 に答える 2

9

最善の策は、偽のイベント オブジェクトを再作成することです。

ドラッグ アンド ドロップ ファイル アップロード ライブラリ ( Droplit、恥知らずなプラグ) の単体テストでは、jQuery のEventメソッドを使用してこれを行っています。私のソースコードでは、ドロップイベントリスナーをelement.ondrop()次のように設定しました:

element.ondrop = function(e) {
  e.preventDefault();
  readFiles(e.dataTransfer.files);
};

ondrop次に、偽のイベント オブジェクトを作成してメソッドに渡すことで、これをテストできます。

element.ondrop($.Event('drop', {dataTransfer: { files: [] }}));
于 2014-04-03T20:44:29.857 に答える