ホームページ > 記事 > ウェブフロントエンド > 毎日 1 レッスン: HTML5 ドラッグ アンド ドロップの例 (ソース コード添付)_html/css_WEB-ITnose
毎日 1 レッスン: HTML5 ドラッグ アンド ドロップの例 (ソース コード添付)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:16:501128ブラウズ
ドラッグ アンド ドロップ (ドラッグ アンド ドロップ) は 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 にご連絡ください。できるだけ早く対応いたします。