ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 ドラッグ アンド ドロップ: ドラッグ アンド ドロップとは何を意味しますか?それの使い方？
HTML5 ドラッグ アンド ドロップ: ドラッグ アンド ドロップとは何を意味しますか?それの使い方？
- 寻∝梦オリジナル
- 2018-08-13 19:11:342826ブラウズ
HTML5 は現在とても人気があります。この記事では主に HTML5 のドラッグ アンド ドロップ要素とその使用方法について説明します。
HTML5 におけるドラッグ アンド ドロップとは何ですか?
ドラッグ アンド ドロップは、オブジェクトを取得して、後で別の場所にドラッグする一般的な機能です。 , ドラッグ アンド ドロップの目的は、オブジェクトを配置したい場所に配置できるようにすることです。 HTML5 では、ドラッグ アンド ドロップが標準の一部であり、任意の要素をドラッグ アンド ドロップできます。
ドラッグとドロップはそれぞれどういう意味ですか?
darg: イベント本体はドラッグされた要素であり、ドラッグされた要素がドラッグ アンド ドロップされるときにトリガーされます。
drop: イベント本文はターゲット要素であり、ターゲット要素がドラッグ アンド ドロップされた要素を完全に受け入れるとトリガーされます。
ブラウザのサポート
Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。
注: Safari 5.1.2 はドラッグをサポートしていません。
HTML5 のドラッグ アンド ドロップの使用例
次の例は、単純なドラッグ アンド ドロップの例です。
例は次のとおりです。少し複雑ですが、ドラッグ アンド ドロップ イベントのさまざまな部分を個別に調べることができます。
イベントをドラッグ アンド ドロップするための詳細な手順:1. 要素をドラッグ可能に設定します
まず、要素をドラッグ可能にするために、draggable 属性を true に設定します:
<!DOCTYPE HTML>
<html>
<head>
<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>
</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>何をドラッグするか - ondragstart と setData()
次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。
dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:
<img draggable="true">
この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。
ヒント: このサイトの「ondragstart イベント」セクションで、さらに役立つ情報を学ぶことができます。
2. 配置場所 - ondragoverondragover イベントは、ドラッグされたデータを配置する場所を指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。
これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます:
event.preventDefault()
3. 配置 - ondropドラッグされたデータが配置されると、drop イベントが発生します。
上記の例では、ondrop 属性は関数、drop(event) を呼び出します:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}コードの説明:
ブラウザのデフォルトのデータ処理を回避するために、preventDefault() を呼び出します (drop イベントのデフォルトの動作はリンクします)フォームで開きます)
dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータ セットを返します。
ドラッグされたデータはドラッグされた要素のID(「drag1」)であり、ドラッグされた要素は配置された要素(対象要素)に追加されます。
【関連おすすめ】
HTMLをゼロから学べるHTMLの基本要素HTMLとHTML5の発展の歴史以上がHTML5 ドラッグ アンド ドロップ: ドラッグ アンド ドロップとは何を意味しますか?それの使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。