HTML5通过api实现拖放排序的实例教程-

HTML5中供给了直接拖放的API，极大的利便我们实现拖放结果，不需要去写一大堆的js，只需要通过监听元素的拖放事件就能实现各种拖放功能。 HTML5 中供给了直接拖放的 API，极大的利便我们实现拖放结果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。

前言

HTML5 中供给了直接拖放的 API，极大的利便我们实现拖放结果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。

想要拖放某个元素，必需设定该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默许设定了 draggable 属性为 true，可直接拖放，要是不想拖放这两个元素，把属性设为 false 即可。

拖放事件

拖放事件由不一样的元素发生。一个元素被拖放，他可能会经过许多个元素上，终究抵达想要放置的元素内。这里，我临时把被拖放的元素称为源对象，被经过的元素称为历程对象，抵达的元素我称为指标对象。不一样的对象发生不一样的拖放事件。

源对象：

1. dragstart：源对象开端拖放。

2. drag：源对象拖放历程中。

3. dragend：源对象拖放完毕。

历程对象：

1. dragenter：源对象开端进入历程对象范畴内。

2. dragover：源对象在历程对象范畴内挪移。

3. dragleave：源对象脱离历程对象的范畴。

指标对象：

1. drop：源对象被拖放到指标对象内。

a元素
b元素
c元素

《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 对象

在所有拖放事件中供给了一个数据通报对象 dataTransfer，用于在源对象和指标对象间通报数据。接下来相识一下这个对象的办法和属性，来理解它是怎样通报数据的。

setData()

该办法向 dataTransfer 对象中存入数据。接收两个参数，首先个表示要存入数据品种的字符串，此刻支撑有下列几种：

1. text/plain：文本文字。

2. text/html：HTML文字。

3. text/xml：XML文字。

4. text/uri-list：URL列表，每个URL为一行。

第二个参数为要存入的数据。例如：

event.dataTransfer.setData('text/plain','Hello World');

getData()

该办法从 dataTransfer 对象中读取数据。参数为在 setData 中指定的数据品种。例如：

event.dataTransfer.getData('text/plain');

clearData()

该办法革除 dataTransfer 对象中寄存的数据。参数可选，为数据品种。若参数为空，则清空所有品种的数据。例如：

event.dataTransfer.clearData();

setDragImage()

该办法通过用img元从来设定拖放图标。接收三个参数，首先个为图标元素，第二个为图标元素离鼠标指针的X轴位移量，第三个为图标元素离鼠标指针的Y轴位移量。例如：

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 和 dropEffect 属性

这两个属性联合起来设定拖放的视觉结果。

值得注意的是：IE 不支撑 dataTransfer 对象。对，无论哪个 IE 版本都不支撑。

实现拖放排序

上面已经熟知了拖放 API 的运用，我们来实现个简略的拖放排序，这也是在项目中比拼常见的。先来理一下思绪：

1. 在一个列表中，每个元素都可以被拖放，那第一要给每个元素设定 draggable 属性为 true。

2. 监听每个元素的 dragstart 事件，对源对象做样式处置来区分。

3. 监听每个元素的 dragenter 事件，当源对象进入到目前元素里，就把源对象增加到该元素以前。这模样背面的元素就会被源对象挤下去了，实现了排序的结果。

4. 但是会发明，源对象没法排到最后一个去，只能在倒数第二。这时就要监听 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》

    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！