Talk about an in-depth understanding of JavaScript native drag and drop

Previous words

Drag-and-drop (DnD) is actually two actions-drag and drop. So, it involves two elements. One is the dragged element, called the drag and drop source; the other is the target to be dropped, called the drag and drop target. This article will introduce native drag and drop in detail by splitting these two concepts

Drag and drop source

What kind of element is the drag and drop source?

HTML5 specifies a draggable attribute for all HTML elements, indicating whether the element can be dragged

The draggable attribute of images and links is automatically set to true, while other The default value of this attribute of the element is false

[Note] Draggable='true' must be set to take effect, only setting draggable will not work

By default, Text can only be dragged while it is selected, while images and links can be dragged at any time. Other elements cannot be dragged and dropped

<input value="文字可拖动">
<img src="/static/imghwm/default1.png"  data-src="http://files.cnblogs.com/files/xiaohuochai/zan.gif"  class="lazy"  alt="图像可拖动" >
<a href="#">链接可拖动</a>
<div id="test" style="height:30px;width:300px;background:pink;">元素不可拖动</div>

When the draggable attribute is set for an element, ordinary elements can also be dragged

<div draggable="true" style="height:30px;width:100px;background:pink;"></div>

Compatible

IE9-browser does not support the draggable attribute, but the dragDrop() method can be called through the mousedown event handler to achieve the drag effect

<div id="test" style="height:30px;width:300px;background:pink;"></div>
<script>
test.onmousedown = function(){
this.dragDrop();
}
</script>

　[Note] If you want Firefox to support the draggable attribute, you must add an ondragstart event handler and use the setData() method on the dataTransfer object to start the effect

Drag and drop event

Drag and drop The source involves 3 drag and drop events. When dragging and dropping the source, the three events dragstart, drag and dragend are triggered in sequence

dragstart

When the mouse button is pressed and the mouse starts to move, the The dragstart event is triggered on the dragged and dropped element. At this time, the cursor changes to a "cannot place" symbol (there is a backslash in the circle), indicating that the element cannot be placed on top of itself

drag

Trigger dragstart After the event, the drag event will be triggered immediately, and the event will continue to be triggered while the element is being dragged

dragend

When the dragging stops (whether the element is dragged) Whether it is placed on a valid placement target or on an invalid placement target), the dragend event will be triggered

<div id="test" draggable="true" style="height:30px;width:100px;background:pink;">0</div>
<script>
var timer,i=0;
test.ondragstart = function(){
this.style.backgroundColor = &#39;lightgreen&#39;;
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = i++;
},100)
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;
this.style.backgroundColor = &#39;pink&#39;;
}
</script>

Drag and drop target

The drag and drop target refers to the target where the dragged element is placed when the mouse is released

When the drag and drop source is dragged to the drag and drop target, dragenter, dragover and dragleave will be triggered in sequence. Or drop these four events

dragenter

As long as an element is dragged to the drop target, the dragenter event

dragover# is triggered

## When the dragged element moves within the range of the drop target, the dragover event continues to be triggered

dragleave

If the element is dragged out If the drop target is placed, the dragleave event is triggered

drop

If the element is placed in the drop target, the drop event is triggered

　[Note] The default behavior of Firefox's drop event is to open the URL placed on the drop target. In order for Firefox to support normal drag and drop, it is necessary to cancel the default behavior of the drop event

By default, the target element is not allowed to be placed, so the drop event will not occur. As long as the default behavior is blocked in the dragover and dragenter events, it can become a permitted drop target and allow drop events to occur. At this point, the cursor changes to a symbol that allows placement

<div id="test" draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div>
<div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目标</div>
<script>
var timer,i=0;
var timer1,i1=0;
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(){
this.style.backgroundColor = &#39;lightgreen&#39;;
this.innerHTML = &#39;开始拖动&#39;;
}
test.ondrag = function(){
if(timer) return;
timer = setInterval(function(){
test.innerHTML = &#39;元素已被拖动&#39; + ++i + &#39;秒&#39;;
},1000);
}
test.ondragend = function(){
clearInterval(timer);
timer = 0;i =0;
this.innerHTML = &#39;结束拖动&#39;;
this.style.backgroundColor = &#39;pink&#39;;
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
if(timer1) return;
timer1 = setInterval(function(){
target.innerHTML = &#39;元素已进入&#39; + (++i1) + &#39;秒&#39;;
},1000);
}
target.ondragleave = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(){
clearInterval(timer1);
timer1 = 0;i1=0;
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

dataTransfer object

In order to achieve data exchange during drag and drop operations , the dataTransfer object is introduced, which is an attribute of the event object and is used to transfer data in string format from the dragged element to the drop target

The dataTransfer object has two main methods: getData() And setData()

GetData() can get the value saved by setData(). The first parameter of the setData() method, which is also the only parameter of the getData() method, is a string indicating the saved data type, and the value is "text" or "URL"

IE only defines two valid data types: "text" and "URL", while HTML5 extends this to allow various MIME types to be specified. Taking into account backward compatibility, HTML5 also supports "text" and "URL", but these two types will be mapped to "text/plain" and "text/uri-list"

Actually , the dataTransfer object can save a value for each MIME type. In other words, there will be no problem saving a piece of text and a URL in this object at the same time

　[Note]The data saved in the dataTransfer object can only be read in the drop event handler

When dragging the text in the text box, the browser will call the setData() method to save the dragged text in the dataTransfer object in "text" format. Similarly, when dragging and dropping a link or image, the setData() method is called and the URL is saved. Then, when these elements are dragged and dropped into the drop target, the data can be read through getData()

<div>请将从这堆内容不同乱七八糟的文字中挑选一些移动到拖放目标中</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = &#39;落入目标区域的文字为:&#39; + e.dataTransfer.getData(&#39;text&#39;);
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

Of course, it can also be processed in the dragstart event Call setData() in the program to manually save the data you want to transmit for future use

<div id="test" draggable="true" data-value="这是一个秘密" style="height:30px;width:100px;background:pink;">拖动源</div>
<div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown = function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(e){
e = e || event;
e.dataTransfer.setData(&#39;text&#39;,test.getAttribute(&#39;data-value&#39;));
}
target.ondragenter = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.innerHTML = &#39;有元素进入目标区域&#39;;
this.style.background = &#39;red&#39;;
}
target.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
target.ondragleave = function(e){
e = e || event;
this.innerHTML = &#39;元素已离开目标区域&#39;;
this.style.backgroundColor = &#39;lightblue&#39;;
}
target.ondrop = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
result.innerHTML = &#39;落入目标区域的文字为:&#39; + e.dataTransfer.getData(&#39;text&#39;);
this.innerHTML = &#39;元素已落在目标区域&#39;;
this.style.backgroundColor = &#39;orange&#39;;
}
</script>
   
改变光标
　　利用dataTransfer对象，不仅可以传输数据，还能通过它来确定被拖动的元素以及作为放罝目标的元素能够接收什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed
　　实际上，这两个属性并没有什么用，只是拖动源在拖动目标上移动时，改变不同的光标而已(但是，有一种情况除外)
dropEffect
　　dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值
　　"none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值(此时，将无法触发drop事件)
　　"move":应该把拖动的元素移动到放置目标
　　"copy":应该把拖动的元素复制到放置目标
　　"link":表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL)
　　在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号
　　[注意]必须在ondragover事件处理程序中针对放置目标来设置dropEffect属性
effectAllowed
　　dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect
　　effectAllowed属性可能的值如下
　　"uninitialized":没有给被拖动的元素设置任何放置行为
　　"none":被拖动的元素不能有任何行为　
　"copy":只允许值为"copy"的dropEffect
　　"link"只允许值为"link"的dropEffect
　　"move":只允许值为"move"的dropEffect
　　"copyLink":允许值为"copy"和"link"的dropEffect
　　"copyMove":允许值为"copy"和"move"的dropEffect
　　"linkMove":允许值为"link"和"move"的dropEffect
　"all":允许任意dropEffect
　　[注意]必须在ondragstart事件处理程序中设置effectAllowed属性

<div id="test" draggable="true" style="height:30px;width:100px;background:pink;display:inline-block;">拖放源</div>
<br>
<div id="target1" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(none)拖放目标</div>
<div id="target2" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(move)拖放目标</div>
<div id="target3" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(copy)拖放目标</div>
<div id="target4" style="margin-top:20px;height: 100px;width:150px;background:lightblue;display:inline-block;">(link)拖放目标</div>
<div id="result"></div>
<script>
//兼容IE8-浏览器
test.onmousedown =function(){
if(this.dragDrop){
this.dragDrop();
}
}
test.ondragstart = function(e){
e = e || event;
//兼容firefox浏览器
e.dataTransfer.setData(&#39;text&#39;,&#39;&#39;);
e.dataTransfer.effectAllowed = &#39;all&#39;;
}
target1.ondragenter = target2.ondragenter =target3.ondragenter =target4.ondragenter =function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}this.style.background = &#39;red&#39;;
}
target1.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;none&#39;;
}
target2.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;move&#39;;
}
target3.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;copy&#39;;
}
target4.ondragover = function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
e.dataTransfer.dropEffect = &#39;link&#39;;
}
target1.ondragleave = target2.ondragleave =target3.ondragleave =target4.ondragleave =function(e){
e = e || event; this.style.backgroundColor = &#39;lightblue&#39;;
}
target1.ondrop = target2.ondrop =target3.ondrop =target4.ondrop =function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
this.style.backgroundColor = &#39;orange&#39;;
}
</script>

The above is the JavaScript native drag and drop introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more in-depth understanding of JavaScript native drag and drop, please pay attention to the PHP Chinese website for related articles!