This article mainly introduces several properties of drag and drop
Build a framework first
<div id="wrap"> <img id="drag" src="" draggable="true"> <div id="drop" > <span>目标区域</span> </div></div>
draggable
To make the element draggable, set draggablethe property to true
<img id="drag" src="b5208ba59f1f064a2d39f991bc1e4dba.jpg" alt="Dragable image" draggable="true"/>
subtractstart
Acts on the drag element. This event is triggered when the drag element is dragged.
<img id="drag" src="b5208ba59f1f064a2d39f991bc1e4dba.jpg" alt="Dragable image" draggable="true" οndragstart="start()"/>
more unbearable
According to Zhang Xinxu's article "HTML5 drag & drop Introduction
to Drag & Drop"
ondragenterEvent: An event triggered when a drag element enters the target element. This event acts on the target element
http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96% E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/
Target element settings
<div id="drop" οndragenter="enter()"> Target area</div>
Regarding this attribute, tests were conducted under several mainstream browsers Safari, Chrome, Firefox, and Opera. It is not triggered when the dragged element enters the target element, but is triggered when the drag point acting on the dragged element enters the target element during the dragging process. In short, when the mouse position enters the area where the target element is located, ondragenterthe event is triggered and can be triggered multiple times.
ondragleave
Acts on the target element and triggers ondragleavethe attribute when the cursor point on the dragged element leaves the target area .
ondragover
Acts on the target element and is triggered when the drag element moves on the target element. ondragoverAfter testing, the event will be triggered when the cursor moves within the target element area . When the cursor falls outside the target area, ondragoverthe event cannot be triggered even if the dragged element is still within the target area.
<div id="drop" οndragenter="enter()" οndragοver="over()"> target area</div>
ondrop
Acts on the target element and triggers the event when the cursor is in the target area and the mouse is released ondrop.
<div id="drop" οndragenter="enter()" οndragοver="over()" οndrοp="letGo()"> target area</div>
Notes: ① You need to block the default event in ondragoverthe event , otherwise the event cannot be triggered. ②Need to be used in conjunction with events.preventDefault()ondropondragover
unbearable
Acts on dragging elements and triggers when dragging is completed
undercarriage exit
According to Diandian Le Taotao's article "Detailed Explanation of H5 Drag and Drop Events"
dragexit: triggered when the element is no longer the direct selection element of the drag operation (rarely used) http://www.cnblogs.com/diantao/p/6282068.html
(Since it is not commonly used, I will not study it now. I will add it when needed)
Post a small demo
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ transition: 2s;
} #wrap{ width: 400px; padding: 20px 0; margin: 0 auto; background-color: #e8e5e5; text-align: center;
} #drop{ position: relative; width: 300px; height: 300px; line-height: 300px; margin: 0 auto; border: 1px solid; text-align: center; font-size: 30px; border-radius: 20%;
} #drag{ border-radius: 20%;
} #imgWrap{ width: 250px; height: 221px; margin: 0 auto; margin-bottom: 10px;
} #notice{ position: absolute; width: 100%
} .change{ animation: change .1s 10; /*animation-iteration-count: 10;*/
}
@keyframes change{
0%{ background-color: #fff;
}
100%{ background-color: red;
}
} </style></head><body>
<div id="wrap">
<div id="imgWrap">
<img id="drag" src="" draggable="true" οndragstart="start()" οndragend="end()">
</div>
<div id="drop" οndragenter="enter()" οndragleave="leave()" οndragοver="over(event)" οndrοp="letGo()"> <div id="notice">
Will Drag the image here</div>
</div>
</div> </body><script type="text/javascript">
function start() { // Triggered when the drag element moves
drag.style.opacity = 0;
} function enter() { // Triggered when the cursor enters the target element area
drop.className = "change";
notice.innerHTML = "";
} function leave() { // Triggered when the cursor leaves the target element area
drop.style.backgroundColor = "";
drag.style.opacity = 1;
} function over(ev ) { // Triggered when the cursor moves within the target element area
ev.preventDefault(); if (drag.style.opacity == 0) {
drop.style.backgroundColor = "red";
}
} function letGo() { // The cursor is in the target element area and released Triggered when the mouse is pressed
drag.style.opacity = 1;
drop.style.backgroundColor = "";
} function end() { // Triggered when the drag ends
drop.appendChild(drag);
drag.style.verticalAlign = "middle";
drag.draggable = false;
}</script></html>
(Is there anyone who can teach me how to write the img tag correctly in the code block? What I write will always change after it is published, so sad...)
Friends are welcome to correct me.