ondrop イベント
コース推薦：
定義と使用法
when the draggable element or text selection is placed on a valid drop target, the ondrop event occurs. HTML5 ドラッグ＆ドロップドラッグ＆ドロップはHTML5で非常に一般的な機能です。これは、オブジェクトを「抓取」して異なる場所にドラッグするときです。さらに詳しく知りたい場合は、以下の
注釈：要素をドラッグ可能にするには、以下のHTMLチュートリアルを使用してください。 HTML5 draggable属性。
ヒント：デフォルトでは、リンクや画像はドラッグ可能であり、draggable属性は必要ありません。
ドラッグ＆ドロップ操作の異なる段階で、多くのイベントが使用され、発生する可能性があります：
ドラッグ可能なターゲット（ソース要素）上でトリガーされるイベント：
- ondragstart - ユーザーが要素をドラッグし始めたときに発生します
- ondrag - 要素がドラッグされたときに発生します
- ondragend - ユーザーがドラッグされた要素を完了したときに発生します
配置ターゲット上でトリガーされるイベント：
- ondragenter - ドラッグされた要素が配置ターゲットに入ったときに発生します
- ondragover - ドラッグされた要素が配置ターゲット上にあるときに発生します
- ondragleave - ドラッグされた要素が配置ターゲットから離れたときに発生します
- ondrop - ドラッグされた要素が配置ターゲットに置かれたときに発生します
例
<div>要素にドラッグ可能な要素を配置したときにJavaScriptを実行します：
<div ondrop="myFunction(event)"></div>
ページの下部にTIYインスタンスが多くあります。
文法
HTMLで：
<element ondrop="myScript">
JavaScriptで：
object.ondrop = function(){myScript};
JavaScriptで、addEventListener()メソッドを使用します：
object.addEventListener("drop", myScript);
注釈：Internet Explorer 8 または以前のバージョンはサポートしていません addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
对所有可能的拖放事件的演示：
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()方法设置被拖拽数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// 更改可拖动元素的不透明度
event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* ----------------- 配置先上で発生するイベント ----------------- */
// ドラッグ可能な p 要素が droptarget に入ったとき、DIV の枠線スタイルを変更します
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// デフォルトでは、データや要素を他の要素に配置することはできません。配置を許可するために、要素のデフォルト処理を防ぐ必要があります
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// ドラッグ可能な p 要素が droptarget を離れたとき、DIV の枠線スタイルをリセットします
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* ドロップ時 - ブラウザのデータのデフォルト処理を防ぎます（デフォルトの配置時にはリンクで開きます）
出力テキストの色と DIV の枠線の色をリセットします
dataTransfer.getData() メソッドを使用してドラッグのデータを取得します
ドラッグされたデータは、ドラッグされた要素の ID ("drag1") です
ドラッグ可能な要素を配置可能な要素に付属させます
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
