A total drag event is divided into seven kinds:
Ondragstart trigger at the beginning of the move
Ondrag trigger on the move
Drag the end of the event ondragend
Ondragenter triggered when dragging elements into the target element
Ondragover moving target element
Ondragleave triggered when leaving the target element
Release the mouse when the trigger ondrop
Drag lifecycle:
1, drag start
2, the drag performed in
3, the end of the drag
composition of the drag
object is dragged to
a target region
Observe all stages of the drag event Let's use the code in order to better
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽--API</title>
<style>
body{
margin: 0;
}
.draggable-box{
width: 100px;
height: 100px;
background-color: #abcdee;
position: absolute;
margin-top: 10px;
margin-left: 20px;
}
.target{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 10px auto;
}
</style>
</head>
<body>
<!-- chrome Safari 正常使用，Firefox部分浏览器支持 -->
<div class="draggable-box" draggable = "true" ></div>
<div class="target"></div>
<! - default can drag tabs ->
<! - <A href = "#"> Hyperlink </a> aaa
<img src = "imgs / bg.jpg" alt = ""> - >
<Script>
var oDragDiv = document.getElementsByClassName("draggable-box")[0];
/ *
Drag lifecycle:
1, drag start
2, the drag performed in
3, the end of the drag
composition of the drag
object is dragged to
a target area
* /
// trigger at the beginning of the movement
var beginX = 0, = 0 BeginY;
oDragDiv.ondragstart = function (E) {
// mouse distance from the border element
BeginX = e.offsetX;
BeginY = e.offsetY;
// the console.log (BeginX, BeginY);
// e.dataTransfer. = the effectAllowed "copyMove"; // move Copy All copyMove
}
oDragDiv.ondrag = function (E) {
// trigger movement
// the console.log ( 'moving the trigger')
}
// end of the drag event
= function oDragDiv.ondragend (E) {
// the console.log (e.clientX, e.clientY);
var X = e.clientX - BeginX;
var Y = e.clientY - BeginY;
// oDragDiv.style.left = x + "px";
// oDragDiv.style.top = y + "px" ;
console.log('over');
}
// event target element
var oDragTarget = document.getElementsByClassName ( 'target') [0]
oDragTarget.ondragenter = function (E) {
triggering element when the drag into the target element //
// Note: only when the mouse enters the trigger
/ / the console.log (E);
}
oDragTarget.ondragover = function (E) {
// moving target element in
// the console.log (E);
e.dataTransfer.effectAllowed = "copyMove";
// trigger prevent direct drag end event pull
e.preventDefault ();
}
trigger element from the target //
oDragTarget.ondragleave = function (E) {
// the console.log (E);
the console.log ( 'leave')
}
// movable element after leaving from the target element trigger
/ *
onDrop this behavior triggered two events back to the original place away from the target elements --- chain model a - b / c
* /
// release the trigger when the mouse
oDragTarget.ondrop = function (e ) {
// console.log(e)
console.log('ondrop');
}
</script>
</body>
</html>