総ドラッグイベントは、7種類に分かれています。
動きの先頭にトリガーOndragstart
移動中のOndragトリガー
イベントの最後をドラッグondragend
ターゲット要素に要素をドラッグするときOndragenterトリガ
移動対象の要素は、OnDblClick
ターゲット要素を出るときOndragleaveがトリガ
マウスを離したときにトリガondrop
オレンジ色のライフサイクル：
1、ドラッグ開始
2、で行わドラッグ
3、ドラッグの端
ドラッグの組成物を
対象ににドラッグされた
対象領域
のより良いするために、コードを使用してみましょうドラッグイベントのすべての段階を観察
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>拖拽--API </ TITLE>
<スタイル>
ボディ{
マージン：0;
}
.draggableボックス{
幅：100pxに。
高さ：100pxに。
背景色：#abcdee。
位置：絶対;
マージントップ：10pxの;
余白左：20ピクセル;
}
.TARGET {
幅：200pxの。
高さ：200pxの。
国境：1pxの黒一色。
マージン：10pxの自動;
}
</スタイル>
</ HEAD>
<BODY>
<！ -クロムサファリ正常使用、Firefoxの部分浏览器支持- >
<divのクラス= "ドラッグ・ボックス"ドラッグ可能= "
<！ -デフォルトでは、タブをドラッグすることができます- >
<！ - <のhref = "＃">ハイパーリンク</a>のAAA
<IMG SRC = "IMGS / bg.jpg" ALT = ""> - >
<スクリプト>
VAR oDragDiv = document.getElementsByClassName（ "ドラッグ・ボックス"）[0];
/ *
ドラッグのライフサイクル：
1、ドラッグ開始
で行わドラッグ、2を
3は、ドラッグの端
ドラッグの組成
オブジェクトがにドラッグされた
標的領域
* /
移動の開始時//トリガ
VAR beginX = 0、 = 0 BeginY;
oDragDiv.ondragstart =関数（E）{
境界要素から//マウス距離
BeginX = e.offsetX;
BeginY = e.offsetY;
//にconsole.log（BeginX、BeginY）;
// e.dataTransfer。 = effectAllowed "copyMove"は、移動//コピーすべてcopyMove
}
oDragDiv.ondrag =関数（E）{
//トリガ移動
//はconsole.log（ 'トリガーを動かす'）
}
ドラッグイベントの//端
=関数oDragDiv.ondragend（E）{
//はconsole.log（e.clientX、e.clientY）;
VAR X = e.clientX - BeginX;
VAR Y = e.clientY - BeginY。
// oDragDiv.style.left = X + "ピクセル"。
// oDragDiv.style.top = Y + "PX"。
console.log（ 'オーバー'）;
}
//イベントターゲット要素は、
VAR oDragTarget = document.getElementsByClassName（「ターゲット」）[0]
oDragTarget.ondragenter =関数（E）{
ターゲット要素にドラッグ//要素をトリガする
。//注意：マウスがトリガーに入ったときにのみ
/ /にconsole.log（E）;
}
oDragTarget.ondragover =関数（E）{
//中の標的要素を移動
//にconsole.log（E）;
e.dataTransfer.effectAllowed = "copyMoveを";
//トリガが直接ドラッグすることを防止終了イベントは、プル
;）（e.preventDefaultを
}
ターゲット//からトリガ素子
oDragTarget.ondragleave =関数（E）{
//はconsole.log（E）
はconsole.log（ '残す'）
}
//可動要素をターゲット要素トリガーから出た後に
/ *
B / C - onDropこの動作は二つの事象バック離れたターゲット要素---チェーンモデルaから元の場所にトリガー
* /
//トリガーを放し、マウス
oDragTarget.ondrop =機能（E ）{
//にconsole.log（E）
はconsole.log（ 'ondrop'）;
}
</ SCRIPT>
</ body>
</ HTML>