毎日 1 レッスン: HTML5 ドラッグアンドドロップの例 (ソースコード添付)_html/css

毎日 1 レッスン: HTML5 ドラッグアンドドロップの例 (ソースコード添付)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:16:50

オリジナル

1127 人が閲覧しました

ドラッグアンドドロップ (ドラッグアンドドロップ) は HTML5 標準の一部です。

ドラッグアンドドロップ

ドラッグアンドドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。

HTML5 ではドラッグアンドドロップが標準の一部であり、あらゆる要素をドラッグアンドドロップできます。

ブラウザのサポート

Internet Explorer 9、Firefox、Opera 12、Chrome、Safari5 はドラッグアンドドロップをサポートしています (注: Safari5.1.2 ではサポートされていません)

HTML5 のドラッグアンドドロップの例

次の例は、単純なドラッグアンドドロップです。例:

例

<!DOCTYPE HTML><html><head><script type="text/javascript">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></head><body><div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" /></body></html>

ログイン後にコピー

少し複雑に見えるかもしれませんが、ドラッグアンドドロップイベントのさまざまな部分を個別に学習できます。

要素をドラッグ可能に設定します

まず、要素をドラッグ可能にするために、draggable 属性を true に設定します:

<img draggable="true" />

ログイン後にコピー

何をドラッグするか - ondragstart と setData()

次に、要素がドラッグされるときに次のように指定します。何が起こるのですか。

上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。

dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します。

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

ログイン後にコピー

この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。

配置場所 - ondragover

ondragover イベントは、ドラッグされたデータを配置する場所を指定します。

デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。

これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます。

event.preventDefault()

ログイン後にコピー

Place - ondrop

ドラッグされたデータが配置されると、drop イベントが発生します。

上記の例では、ondrop 属性が関数 Drop(event) を呼び出します。

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

ログイン後にコピー

コードの説明:

ブラウザのデフォルトのデータ処理を回避するために、preventDefault() を呼び出します (drop イベントのデフォルトの動作は次のとおりです)。リンクとして開く)
dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータセットを返します。
ドラッグされたデータはドラッグされた要素のIDです("drag1")
ドラッグされた要素を配置要素(ターゲット要素)に追加します

元のリンク

記事はインターネットからのものです(存在する場合)あなたの権利と利益については、時間内に QQ: 123464386 にご連絡ください。できるだけ早く対応いたします。