English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
ドラッグ＆ドロップは一般的な機能であり、オブジェクトを抓取して別の場所にドラッグすることができます。HTMLにおいて5 において、ドラッグ＆ドロップは標準の一部であり、どんな要素もドラッグ＆ドロップできます。
ドラッグ＆ドロップ（Drag and drop）はHTML5 標準の一部です。
oldtoolbag.com アイコンを矩形ボックスにドラッグします。
ドラッグ＆ドロップは一般的な機能であり、オブジェクトを抓取して別の場所にドラッグすることができます。
HTMLにおいて5 において、ドラッグ＆ドロップは標準の一部であり、どんな要素もドラッグ＆ドロップできます。
Internet Explorer 9+, Firefox, Opera, Chrome, および Safari がドラッグ＆ドロップをサポートしています。
注意:Safari 5.1.2不支持拖动.
下面的示例是一个简单的拖放示例：
!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础教程(oldtoolbag.com)</title>
<style type="text/css">
#div1 {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>ドラッグ oldtoolbag.com 画像を矩形ボックスに配置します:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>テストしてみてください ‹/›これは少し複雑に見えるかもしれませんが、ドラッグ＆ドロップイベントの各部分をそれぞれ研究することができます。
まず、要素をドラッグ可能にするためにdraggable属性をtrueに設定します：
<img draggable="true">
次に、要素がドラッグされた場合に何が発生するかを規定します。
上記の例では、ondragstart属性がdrag(event)という関数を呼び出しました、これはドラッグデータを規定します。
dataTransfer.setData()メソッドは、ドラッグデータのデータタイプと値を設定します：
function drag(ev)
}
ev.dataTransfer.setData("Text",ev.target.id);
}
Textは、ドラッグオブジェクトに追加するドラッグデータのタイプを表すDOMStringです。値は、ドラッグ可能要素のid（"drag"）です：1")。
ondragoverイベントが、ドラッグされているデータをどこに配置するかを規定します。
デフォルトでは、データ/要素が他の要素に配置された場合、要素に配置を許可するためにデフォルトの処理を阻止する必要があります。
これはondragoverイベントのevent.preventDefault()メソッドを呼び出して行われます：
event.preventDefault()
データがドラッグされると、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)
ドラッグされた要素をドロップされた要素（ターゲット要素）に追加します
HTML5画像を往復してドラッグ＆ドロップ
2つの<div>要素の間に画像をドラッグ＆ドロップする方法