12

HTML5のドラッグアンドドロップイベントのコツをつかもうとしています。

function rowDragStart(event) {
    let targetRowId = event.target.attributes.row.value;
    event.dataTransfer.setData("text/plain", targetRowId);
}

function rowDragOver(event) {
    event.preventDefault();
    let draggingId = event.dataTransfer.getData('text');
}

今のところ、dragStart の dataTransfer オブジェクトに何かを入れて、dragOver で取得しようとしています。問題は、ドラッグオーバーに存在しないことです。ブレークポイントを設定し、これらのイベントが呼び出されていgetData('text')ますが、考えられる他のすべての可能性とともに、空の文字列を返します。

4

1 に答える 1

22

HTML5 Drag&Drop 仕様のEvent-Summaryによると、 のDrag data storeイベントのモードdragoverはProtected モード です。

保護モード:

ドラッグされたデータを表すアイテムのドラッグ データ ストア リスト内の形式と種類は列挙できますが、データ自体は使用できず、新しいデータを追加することはできません。

これは、ファイルと html5 要素のドラッグ アンド ドロップの両方に使用できます。

つまり、ドラッグされた要素のタイプとドラッグされた要素の数にアクセスできますが、それらのデータは実際にドロップするまで利用できません。

これは設計によるものです

HTML5 要素のドラッグ アンド ドロップの例を次に示します。

function dragstart_handler(ev) {
  console.log("drag start");
  // Change the source element's background color to signify drag has started
  ev.currentTarget.style.border = "dashed";
  // Set the drag's format and data. Use the event target's id for the data 
  ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragover_handler(ev) {
  console.log("drag over, total types:", ev.dataTransfer.types.length, 'type available:', ev.dataTransfer.types[0]);
  ev.preventDefault();
}

function drop_handler(ev) {
  console.log("drop, total types:", ev.dataTransfer.types.length, 'data dropped:', ev.dataTransfer.getData('text/plain'));
  ev.preventDefault();
  
  // Clear the drag data cache (for all formats/types)
  ev.dataTransfer.clearData();
}
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>

于 2016-12-02T21:17:14.150 に答える