ドムドラッグアンドドロップ

DomDataTransfer.clearDataの例



Dom Datatransfer Cleardata Example



NSDataTransfer.clearData（）メソッドは、ドラッグ操作のを削除します指定されたタイプのデータをドラッグします。指定されたタイプのデータが存在しない場合、このメソッドは何もしません。

このメソッドが引数なしで呼び出された場合、または形式が空の場合文字列、すべてのタイプのデータが削除されます。



この方法は いいえ ドラッグ操作からファイルを削除するので、タイプのエントリがまだ存在する可能性がありますオブジェクトに残っている「ファイル」 DataTransfer.types ドラッグに含まれているファイルがあるかどうかをリストします。

このメソッドは、のハンドラーでのみ使用できます。ドラッグスタートイベント。ドラッグ操作のデータストアに書き込み可能なのはこのイベントだけだからです。



構文

DataTransfer.clearData([format]);

パラメーター

フォーマットオプション
に削除するデータのタイプを指定する文字列。このパラメーターが空の文字列であるか、指定されていない場合、すべてのタイプのデータが削除されます。

例

この例は、DataTransferオブジェクトの getData（） 、 setData（） と clearData（） メソッド。

HTML

<span class='tweaked' id='source' draggable='true'> Select this element, drag it to the Drop Zone and then release the selection to move the element. span> <span class='tweaked' id='target'>Drop Zonespan> <div>Status: <span id='status'>Drag to startspan>div> <div>Data is: <span id='data'>uninitializedspan>div>

CSS

span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }

JavaScript

window.addEventListener('DOMContentLoaded', function () { // Select HTML elements var draggable = document.getElementById('source'); var dropable = document.getElementById('target'); var status = document.getElementById('status'); var data = document.getElementById('data'); var dropped = false; // Register event handlers draggable.addEventListener('dragstart', dragStartHandler); draggable.addEventListener('dragend', dragEndHandler); dropable.addEventListener('dragover', dragOverHandler); dropable.addEventListener('dragleave', dragLeaveHandler); dropable.addEventListener('drop', dropHandler); function dragStartHandler (event) { status.textContent = 'Drag in process'; // Change target element's border to signify drag has started event.currentTarget.style.border = '1px dashed blue'; // Start by clearing existing clipboards; this will affect all types since we // don't give a specific type. event.dataTransfer.clearData(); // Set the drag's format and data (use event target's id for data) event.dataTransfer.setData('text/plain', event.target.id); data.textContent = event.dataTransfer.getData('text/plain'); } function dragEndHandler (event) { if (!dropped) { status.textContent = 'Drag canceled'; } data.textContent = event.dataTransfer.getData('text/plain') || 'empty'; // Change border to signify drag is no longer in process event.currentTarget.style.border = '1px solid black'; if (dropped) { // Remove all event listeners draggable.removeEventListener('dragstart', dragStartHandler); draggable.removeEventListener('dragend', dragEndHandler); dropable.removeEventListener('dragover', dragOverHandler); dropable.removeEventListener('dragleave', dragLeaveHandler); dropable.removeEventListener('drop', dropHandler); } } function dragOverHandler (event) { status.textContent = 'Drop available'; event.preventDefault(); } function dragLeaveHandler (event) { status.textContent = 'Drag in process (drop was available)'; event.preventDefault(); } function dropHandler (event) { dropped = true; status.textContent = 'Drop done'; event.preventDefault(); // Get data linked to event format text  var _data = event.dataTransfer.getData('text/plain'); var element = document.getElementById(_data); // Append drag source element to event's target element event.target.appendChild(element); // Change CSS styles and displayed text element.style.cssText = 'border: 1px solid black;display: block; color: red'; element.textContent = 'I'm in the Drop Zone!'; } })

仕様

仕様 状態 コメント
HTMLリビングスタンダード
その仕様における「DataTransfer.clearData（）」の定義。 		生活水準
HTML 5.1
その仕様における「DataTransfer.clearData（）」の定義。 		おすすめ 初期定義

ブラウザの互換性

デスクトップ モバイル
クロム 角 Firefox インターネットエクスプローラ オペラ サファリ WebView Android Chrome Android Android版Firefox Opera Android IOS上のSafari サムスンインターネット
clearData はい 12 3.5 ？ はい はい はい はい 4 はい 番号 はい

も参照してください