Home > Article > Web Front-end > H5 drag and drop API for drag and drop sorting
This time I will bring you the H5 drag-and-drop API for drag-and-drop sorting. What are the precautions for drag-and-drop sorting using the H5 drag-and-drop API? The following is a practical case, let’s take a look.
Preface
HTML5 provides a direct drag-and-drop API, which greatly facilitates us to achieve the drag-and-drop effect. We don’t need to write a lot of js, just Various drag-and-drop functions can be implemented by listening to the drag-and-drop events of elements. If you want to drag and drop an element, you must set the element's draggableDrag and drop events
Drag and drop events are generated by different elements. When an element is dragged and dropped, it may pass through many elements before finally reaching the element you want to place. Here, I temporarily call the dragged element the source object, the passed element the process object, and the arrived element the target object. Different objects generate different drag and drop events. Source object:<p id="source" draggable="true">a元素</p>
<p id="process">b元素</p>
<p id="target">c元素</p>
<script>
var source = document.getElementById('source'), // a元素
process = document.getElementById('process'), // b元素
target = document.getElementById('target'); // c元素
source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生
console.log('a元素开始被拖动');
},false)
process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生
console.log('a元素开始进入b元素');
},false)
process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生
console.log('a元素离开b元素');
},false)
target.addEventListener('drop',function(ev){ // drop事件由c元素产生
console.log('a元素拖放到c元素了');
ev.preventDefault();
},false)
document.ondragover = function(e){e.preventDefault();}
</script>
dataTransfer object
Provides a data transfer object dataTransfer in all drag and drop events, used to transfer between the source object and the target object Pass data. Next, let's get to know the methods and properties of this object to understand how it transfers data.setData()
This method stores data into the dataTransfer object. Receives two parameters. The first one represents thestring indicating the type of data to be stored. Currently, the following types are supported:
event.dataTransfer.setData('text/plain','Hello World');
getData()
This method reads data from the dataTransfer object. The parameter is the data type specified in setData. For example:event.dataTransfer.getData('text/plain');
clearData()
This method clears the data stored in the dataTransfer object. The parameter is optional and is the data type. If the parameter is empty, all types of data will be cleared. For example:event.dataTransfer.clearData();
setDragImage()
This method sets the drag and drop icon by using the img element. Receives three parameters, the first is the icon element, the second is the X-axis displacement of the icon element from the mouse pointer, and the third is the Y-axis displacement of the icon element from the mouse pointer. For example:var source = document.getElementById('source'),
icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){
ev.dataTransfer.setDragImage(icon,-10,-10)
},false)
effectAllowed and dropEffect properties
These two properties are combined to set the visual effect of drag and drop. It is worth noting: IE does not support dataTransfer objects. Yes, it is not supported regardless of IE version.Implement drag-and-drop sorting
We are already familiar with the use of drag-and-drop API. Let’s implement a simple drag-and-drop sorting, which is also common in projects. . Let’s sort out the idea first:监听每个元素的 dragenter 事件，当源对象进入到当前元素里，就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了，实现了排序的效果。
但是会发现，源对象无法排到最后一个去，只能在倒数第二。这时就要监听 dragleave 事件，当过程对象是最后一个元素时，源对象离开了过程对象，这时就把源对象添加到最后去。
主要代码如下：
var source = document.querySelectorAll('.list'),
dragElement = null;
for(var i = 0; i < source.length; i++){
source[i].addEventListener('dragstart',function(ev){
dragElement = this;
},false);
source[i].addEventListener('dragenter', function(ev){
if(dragElement != this){
this.parentNode.insertBefore(dragElement,this);
}
}, false)
source[i].addEventListener('dragleave', function(ev){
if(dragElement != this){
if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
this.parentNode.appendChild(dragElement);
}
}
}, false)
};
document.ondragover = function(e){e.preventDefault();}
document.ondrop = function(e){e.preventDefault();}
完整的代码地址：drag-demo
兼容
主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。
而且在我简单的试验中发现，就是在 IE 中元素不设置 height 的时候，不会触发 dragleave 事件。
更重要的一点是在 ios 和安卓上，完全不兼容。不过还好，有一个插件能让它在移动端完美兼容。
插件地址：ios-html5-drag-drop-shim
只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。
<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
H5的多线程（Worker SharedWorker）使用详解
The above is the detailed content of H5 drag and drop API for drag and drop sorting. For more information, please follow other related articles on the PHP Chinese website!