ホームページ > 記事 > ウェブフロントエンド > HTML5 ドラッグ アンド ドロップ機能の実装コード
HTML5 ドラッグ アンド ドロップ機能の実装コード
- 黄舟オリジナル
- 2017-02-20 13:35:331366ブラウズ
HTML5ではドラッグアンドドロップが標準であり、具体的な内容は以下の通りです
1. ドラッグアンドドロップ
まず、要素をドラッグ可能にするために、draggable 属性を true に設定します: 70ad500012d66cb8c97f97b908e6e933
3. ドラッグするもの - ondragstart と setData()
次に、要素がドラッグされたときに何が起こるかを指定します。上の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。 dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。 ）。
4. 配置場所 - ondragover
ondragover イベントは、ドラッグされたデータを配置する場所を指定します。デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます: event.preventDefault()
5. 配置 - ondrop
ドラッグされたデータが配置されると、drop イベントが発生します。上記の例では、ondrop 属性は関数 Drop(event) を呼び出します。
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}コードの説明:
ブラウザのデフォルトのデータ処理 (ドロップ イベントのデフォルト) を避けるために、preventDefault() を呼び出します。動作はリンクとして開かれます)。 dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータ セットを返します。ドラッグされたデータは、ドラッグされた要素の ID (「drag1」) です。ドラッグした要素をドロップした要素（ターゲット要素）に追加します。
上記は HTML5 ドラッグ アンド ドロップ機能の実装コードの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。
-->