26795


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

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

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

実装サンプル

[code]

    {
      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);
    }
[/code]

[code]

    #div1 {
      width: 100px;
      height: 100px;
      background-color: #EDF;
    }
    
    #div2 {
      width: 100px;
      height: 100px;
      background-color: #FED;
    }
[/code]

[code]

    <div id="wrapper">
      <div id="div1" draggable="true">div1</div>
      <div id="div2">div2</div>
    </div>
    <button id="dragstart_trigger">trigger dragstart</button>
[/code]

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


CC BY-SA 4.0
2016-06-16T04:16:06.760
26776
2019-12-13T18:32:14.527
2019-12-13T18:32:14.527
32986
9796
question
javascript html5
dispatchEvent経由でDnDしたい


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

DnDで発行されるのは[DragEvent](https://developer.mozilla.org/en-
US/docs/Web/API/DragEvent)なので、これのコンストラクタを呼べばいいように思いますが、これで作成されるDragEventのdataTransferはデフォルトではnullです。オプションで[DataTransfer](https://developer.mozilla.org/en-
US/docs/Web/API/DataTransfer)を設定できますが、DataTransferにコンストラクタはないので、やはりユーザーアクション以外で作成する方法はないです。

[DragEvent](https://developer.mozilla.org/en-
US/docs/Web/API/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処理と密接に連携しているからである。」みたいな感じだと思います。


CC BY-SA 3.0
2016-06-16T13:48:23.380
26795
2016-06-21T11:21:22.797
2016-06-21T11:21:22.797
8000
3974
26776
answer