2

DnD機能をJavaScriptからテストしたいと考えています.

EventTarget.dispatchEvent を利用して dragstart イベントをトリガーさせると、
DataTransfer オブジェクトが生成されず、event.dataTransfer が undefined になってしまい、
マウスによるDnDと同じ挙動になりません.

dataTransfer
https://developer.mozilla.org/ja/docs/DragDrop/DataTransfer

実装サンプル

{
  const dragStartHandler = function(event) {
    console.info('dragStartHandler triggered');
    console.info(event);
    event.dataTransfer.setData('text', 'はろー' + event.target.id);
  };
  const dragEndHandler = function(event) {
    console.info('dragEndHandler triggered');
  };
  const dragOverHandler = function(event) {
    console.info('dragOverHandler triggered');
    event.preventDefault();
  };
  const dragEnterHandler = function(event) {
    console.info('dragEnterHandler triggered');
    event.preventDefault();
  };
  const dragLeaveHandler = function(event) {
    console.info('dragLeaveHandler triggered');
    event.preventDefault();
  };
  const dropHandler = function(event) {
    console.info('dropHandler triggered');
    let transferedStr = event.dataTransfer.getData('text');
    console.info(transferedStr);
    event.preventDefault();
  };

  document.getElementById('div1').addEventListener('dragstart', dragStartHandler, false);
  document.getElementById('div1').addEventListener('dragend', dragEndHandler, false);

  document.getElementById('div2').addEventListener('dragover', dragOverHandler, false);
  document.getElementById('div2').addEventListener('dragenter', dragEnterHandler, false);
  document.getElementById('div2').addEventListener('dragleave', dragLeaveHandler, false);
  document.getElementById('div2').addEventListener('drop', dropHandler, false);

  document.getElementById('dragstart_trigger').addEventListener('click', function(event) {
    document.getElementById('div1').dispatchEvent(new Event('dragstart'));
  }, false);
}
#div1 {
  width: 100px;
  height: 100px;
  background-color: #EDF;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #FED;
}
<div id="wrapper">
  <div id="div1" draggable="true">div1</div>
  <div id="div2">div2</div>
</div>
<button id="dragstart_trigger">trigger dragstart</button>

改善策があれば教えていただきたいです.

0

1 件の回答 1

4

たぶんできないと思います。MouseEventなど大概のイベントはnew MouseEvent(...)など適したイベントクラスのオブジェクトを作成すればプログラム的に実行できます(gochoさんの使用していたEventクラスは全てのイベントクラスのベースで、共通プロパティしか持たないので基本的には役に立つことには使えません)。

DnDで発行されるのはDragEventなので、これのコンストラクタを呼べばいいように思いますが、これで作成されるDragEventのdataTransferはデフォルトではnullです。オプションでDataTransferを設定できますが、DataTransferにコンストラクタはないので、やはりユーザーアクション以外で作成する方法はないです。

DragEventのコンストラクタの項目の黄色い枠内にも

Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since DataTransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops.

と書かれており、ソースはわかりませんがご質問でやりたいことをやる方法はないのだと思います。ちなみに上の訳は「DataTransferはコンストラクタを持つが、役に立つDataTransferオブジェクトをスクリプトから作成はできない。これはDataTransferの処理およびセキュリティモデルがブラウザのDnD処理と密接に連携しているからである。」みたいな感じだと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。