html 5ドラッグアンドドロップ効果を実現

html 5ではドラッグアンドドロップ操作を実現するには、従来のマウス操作よりもずっと簡単で、データの安全性も保障されています.以下のステップだけでいいです.

ファイルドラッグアンドドロップの場合、ドラッグアンドドロップされた要素にdraggable属性を追加します.

は、ドラッグ要素のdragstartに関連するデータ情報を初期化し、主にDataTransferオブジェクトである.

ターゲット要素のdragoverイベントでは、デフォルトの操作がキャンセルされます.

ターゲット要素のdropイベントにおいて、受信されたデータが処理される.

要素を引っ張られたdragend事件で、後始末をする.なければ省略できます.

大まかなコードは次のとおりです.

<div id="source" draggable="draggable">source</div>

<div id="target">target</div>

<script type="text/javascript">

var target = document.getElementById('target');

var source = document.getElementById('source');

source.ondragstart = function(e){

  e.dataTransfer.effectAllowed = 'copyMove';

  e.dataTransfer.setData('test', 'testData');

};

target.ondragover = function(e){

  e.dataTransfer.dropEffect = 'move';

  e.preventDefault(); //    

};

target.ondrop = function(e){

  var elem = document.createElement('a');

  elem.innerHTML = e.dataTransfer.getData('test');

  e.target.appendChild(elem);

};

</script>

draggableプロパティ
draggableは、ラベルがドラッグできるかどうかを指定する列挙プロパティです.次の4つの値があります.

true:この要素がドラッグ可能であることを示します.

false:この要素がドラッグできないことを示します.

auto:imgとhref付きラベルaがドラッグ可能を示すほか、その他のラベルはドラッグ不可を示す.

その他の値:ドラッグしてはいけないことを示します.

何をドラッグしますか-ondragstartとsetData()
ondragstartプロパティは、ドラッグされるデータを規定する関数、drag(event)を呼び出します.
dataTransfer.setData()メソッドは、ドラッグされたデータのデータ型と値を設定します.
どこに置くか-ondragover
ondragoverイベントは、ドラッグされたデータをどこに配置するかを規定します.
デフォルトでは、データ/要素は他の要素に配置できません.配置を許可する設定が必要な場合は、要素のデフォルトの処理を阻止する必要があります.
これはondragoverイベントのeventを呼び出すことによって行われます.preventDefault()メソッド.