HTML5_html/css_WEB-ITnose を使用してドラッグ アンド ドロップまたは並べ替えをネイティブに実装する

ネイティブのドラッグ アンド ドロップ

ドラッグ アンド ドロップは非常に一般的な機能であり、この機能は Html5 標準の一部になりました。ドラッグ アンド ドロップは、HTML5 を使用してわずか数行のコードで実現できます。たとえば、次の例では、この画像を上下にドラッグ アンド ドロップできます。

サンプル コード

<script>function allowDrop(ev) {    ev.preventDefault();}function drag(ev) {    ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {    ev.preventDefault();    var data = ev.dataTransfer.getData("text");    ev.target.appendChild(document.getElementById(data));}</script><div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)">    <img id="drag1" src="/img/ad_ourjs.jpg" draggable="true" ondragstart="drag(event)"></div>

コード ステップ

ステップ 1: 要素をドラッグ アンド ドロップするには

が必要です設定するドラッグ可能な属性

<img draggable="true">

第 2 ステップ: ドラッグ アンド ドロップする内容

ondragstart イベントの dataTransfer.setData を通じてドラッグ アンド ドロップされた要素を設定します

function drag(ev) {    ev.dataTransfer.setData("text", ev.target.id);}

今回の場合 次に、ドラッグ＆ドロップしているオブジェクトのIDを渡して操作するので、型は「テキスト」です

ステップ3：ドラッグ＆ドロップする場所

です通常、要素は他の場所にドラッグ アンド ドロップできます。コンテナで配置が許可されている場合は、ondragover イベント

function allowDrop(ev) {    ev.preventDefault();}

で

を配置するだけです。イベント オブジェクトをコンテナに "転送"

function drop(ev) {    ev.preventDefault();    var data = ev.dataTransfer.getData("text");    ev.target.appendChild(document.getElementById(data));}

ここでは、ドラッグ アンド ドロップしたオブジェクトを appendChild を通じて転送します。同様に、別の場所に配置することで並べ替えを実現できます。

関連イベント

ドラッグ アンド ドロップ オブジェクトで発生するイベント

ondragstart - ユーザーがドラッグ アンド ドロップを開始したとき

ondrag - ユーザーがドラッグ アンド ドロップを開始したときDropping

ondragend - ユーザーのドラッグ アンド ドロップが終了したとき

ドロップ オブジェクト (コンテナ) で発生するイベント

ondragenter - ドラッグ アンド ドロップ オブジェクトがコンテナに入ったとき (for初回)

ondragover - ドラッグされたオブジェクトがコンテナを通過するとき

ondragleave - ドラッグされたオブジェクトがウィンドウから離れるとき

ondrop - ドラッグされたオブジェクトがコンテナに放されるときコンテナ

DataTransfer

標準プロパティ

DataTransfer.dropEffect ドラッグ アンド ドロップ操作の種類: コピー、移動、リンク、またはなし (コピー、移動、リンクの作成など)

DataTransfer.effectAllowed 再生が許可されるタイプ: たとえば、一部のコンテナーはコピーのみ可能、一部のコンテナーは移動のみ可能などです。

DataTransfer.files には、ドラッグ-ドラッグ アンド ドロップ ファイルがない場合、このリストは空です。

DataTransfer.items 読み取り専用 DataTransferItemList オブジェクト

DataTransfer.types 読み取り専用のドラッグ タイプ。ドラッグスタートイベントで指定

標準メソッド

DataTransfer.clearData() 指定した型のドラッグアンドドロップデータをクリア

DataTransfer.getData()指定した型のデータを取得

DataTransfer.setData() 指定した型のデータを設定

DataTransfer.setDragImage() ドラッグ＆ドロップ時のカスタムアイコンを設定

サポート: IE9 以降

参照:

http://www.w3schools.com/ html/html5_draganddrop.asp

http://www.w3schools.com/ jsref/event_ondragstart.asp

https://developer.mozilla.org/en-US/docs/Web/ API/DataTransfer