Home >Web Front-end >H5 Tutorial >H5 drag and drop API basics
Make no mistake, this article is not about how to mop the floor. Friends who have read "javascriptEssence" should know that the process of implementing drag and drop is relatively complicated. Times are different now. We can use H5's new drag and dropAPI It is very convenient to realize the drag and drop effect. Recently, I met a fellow gardener in the garden who wrote an article "HTML5 Advanced Series: Drag-and-Drop API to Realize Drag-and-Drop Sorting". It is really the work of a master. Mr. Xiong, as a newbie (not a master), I can't compare with it, so I launched the basic chapter. I hope all garden friends will gain something from it.
1. A simple example--pick up a few pebbles on the ground地上有石子,捡几个吧 我是篮子 我是地 石子 石子 石子 石子 石子 石子 石子 石子 石子 石子
properties and methods. What are the functions of those methods? What do those attributes mean? Come one by one below.
2. General steps to implement drag and drop1. Find a draggable element
Just as not everyone is called Big Bear, and Not all elements can be dragged. The img and a elements are draggable by default, and other elements are not draggable by default. At that time, you can add draggable=true to make it draggable.<p draggable='true'></p>
2. Handle drag-and-drop related events
All related events are as follows: (This is taken from: http://www.cnblogs.com/linxin/p/6794542.html) SourceObject :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>testEvents</title> <style type="text/css"> .source{ width: 50px; height: 50px; border: 1px solid red; } .process{ width: 100px; height: 100px; border: 1px solid black; margin-top: 10px; } .dest{ width: 100px; height: 100px; border: 1px solid green; margin-top: 10px; } </style></head><body> <p class="source" id="source" draggable="true"></p> <p class="process" id="process"></p> <p class="dest" id="dest"></p> <script type="text/javascript"> window.onload=function(){ var source = document.getElementById("source"); var process = document.getElementById("process"); var dest = document.getElementById("dest"); var sourceEle; source.addEventListener("dragstart",function(e){ console.log("source dragstart"); console.log(e); sourceEle = e.target; var dt = e.dataTransfer; dt.effectedAllowed = "all"; },false); process.addEventListener("dragenter",function(e){ console.log("process dragenter"); console.log(e); },false); process.addEventListener("dragover",function(e){ console.log("process dragover"); console.log(e); },false); process.addEventListener("dragleave",function(e){ console.log("process dragleave"); console.log(e); },false); source.addEventListener("drag",function(e){ console.log("source drag"); console.log(e); },false); dest.addEventListener("dragend",function(e){ console.log("dest dragend"); console.log(e); e.preventDefault(); },false); dest.addEventListener("drop",function(e){ console.log("dest drop"); console.log(e); dest.appendChild(sourceEle); e.preventDefault(); e.stopPropagation(); },false); document.ondragover = function(e){e.preventDefault();} document.ondrop = function(e){e.preventDefault();} } </script></body></html>
Let’s do some simple tests
About effectAllowed and dropEffect, here the former is set to effectAllowed and the latter is selected using the drop-down list so that different mouse styles can be seen.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>testEvents</title> <style type="text/css"> .source{ width: 50px; height: 50px; border: 1px solid red; } .process{ width: 100px; height: 100px; border: 1px solid black; margin-top: 10px; } .dest{ width: 100px; height: 100px; border: 1px solid green; margin-top: 10px; } </style></head><body> <select id="dpe"> <option value="copy">copy</option> <option value="move">move</option> <option value="link">link</option> <option value="none">none</option> </select> <p class="source" id="source" draggable="true"></p> <p class="process" id="process"></p> <p class="dest" id="dest"></p> <script type="text/javascript"> window.onload=function(){ var source = document.getElementById("source"); var process = document.getElementById("process"); var dest = document.getElementById("dest"); var dpe = document.getElementById("dpe"); var dpev; dpe.onchange = function(){ dpev = this.value; } var sourceEle; source.addEventListener("dragstart",function(e){ console.log("source dragstart"); console.log(e); sourceEle = e.target; var dt = e.dataTransfer; dt.effectedAllowed = "all"; },false); dest.addEventListener("dragend",function(e){ console.log("dest dragend"); console.log(e); e.preventDefault(); },false); dest.addEventListener("drop",function(e){ console.log("dest drop"); console.log(e); dest.appendChild(sourceEle); e.preventDefault(); e.stopPropagation(); },false); document.ondragover = function(e){ e.dataTransfer.dropEffect = dpev; e.preventDefault(); } document.ondrop = function(e){e.preventDefault();} } </script></body></html>
About the setData() and getData() methods
These two are methods related to data exchange. The former passes two parameters, and the first parameter is a mime type.String, the second one is data; the latter passes a parameter, which is mime type. Available mime types are text/plain, text/html, text/xml, text/uri-list.
Test case, drag the menu item onto the notebook.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点菜</title> <style type="text/css"> .menu{ width: 200px; height: 300px; border: 1px solid red; margin-right: 10px; float: left; } .record{ width: 200px; height: 300px; border: 1px solid black; margin-right: 10px; float: left; } </style></head><body> <ul class="menu" id="menu"> <li draggable="true">糖醋排骨</li> <li draggable="true">青椒肉丝</li> <li draggable="true">武昌鱼</li> <li draggable="true">手撕包材</li> <li draggable="true">千叶豆腐</li> </ul> <ul class="record" id="record"> </ul> <script type="text/javascript"> window.onload = function(){ var menu = document.getElementById("menu"); var record = document.getElementById("record"); menu.addEventListener("dragstart",function(e){ var dt = e.dataTransfer; var tar = e.target; if(tar.tagName=="LI"){ dt.setData("text/plain",tar.innerHTML); } dt.effectedAllowed = "all"; },false); record.addEventListener("drop",function(e){ var li = document.createElement("li"); li.appendChild(document.createTextNode(e.dataTransfer.getData("text/plain"))); record.appendChild(li); e.stopPropagation(); },false); record.addEventListener("dropend",function(e){ e.preventDefault(); },false); document.addEventListener("dragover",function(e){e.preventDefault()},false); document.addEventListener("drop",function(e){e.preventDefault()},false); } </script></body></html>
关于setDragImage(Element img,long x,long y)
这个方法是设置拖放时的图标的,第一个参数表是图标元素,第二个表示相对与光标的水平偏移,第三个是垂直的。
还是前面的例子,在dragstart事件添加下面的代码,拖动时你会发现一只很大的手(不要被吓到);
var img = document.createElement("img"); img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493802056263&di=232de2c30491e19f32833669ad5a67ae&imgtype=0&src=http%3A%2F%2Fstatic.freepik.com%2Ffree-photo%2Fone-finger_318-10333.jpg"; dt.setDragImage(img,10,10);
上面的例子已经谈到了拖放的数据传递方法,这里在总结一下。
1、通过dataTransfer的setData()和getData()方法传递
2、通过闭包的方法,请参考开篇的例子。
HTML5的拖放api非常简洁实用,为我们省去了很多麻烦,如果没有它,我们可能需要通过mousedownmousemove等等事件才能实现上述功能。本文较为详细的介绍了相关api,希望对你有所帮助。关于拖放api的应用大家可以参看下面链接的文章,他做了一个拖放排序,这是一个比较常见的应用场景。
大~熊同学的粉丝数正在逼近三位数,感谢各位园友的支持,大~熊会继续努力的!
参考:
http://www.cnblogs.com/ijjyo/p/4316232.html
http://www.cnblogs.com/linxin/p/6794542.html
The above is the detailed content of H5 drag and drop API basics. For more information, please follow other related articles on the PHP Chinese website!