HTML5 进阶系列：拖放 API 完成拖放排序

2019年8月25日 109次阅读 来源: linshuai

媒介

HTML5 中供应了直接拖放的 API，极大的轻易我们完成拖放结果，不需要去写一大堆的 js，只需要经由历程监听元素的拖放事宜就可以完成种种拖放功用。

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

拖放事宜

拖放事宜由差别的元素发生。一个元素被拖放，他可能会经由很多个元素上，终究抵达想要安排的元素内。这里，我临时把被拖放的元素称为源对象，被经由的元素称为历程对象，抵达的元素我称为目的对象。差别的对象发生差别的拖放事宜。

源对象：

  • dragstart：源对象最先拖放。

  • drag：源对象拖放历程当中。

  • dragend：源对象拖放完毕。

历程对象：

  • dragenter：源对象最先进入历程对象局限内。

  • dragover：源对象在历程对象局限内挪动。

  • dragleave：源对象脱离历程对象的局限。

目的对象：

  • drop：源对象被拖放到目的对象内。

<div id="source" draggable="true">a元素</div>
<div id="process">b元素</div>
<div id="target">c元素</div>

<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 对象中存入数据。吸收两个参数，第一个示意要存入数据品种的字符串，如今支撑有以下几种：

  • text/plain：文本笔墨。

  • text/html：HTML笔墨。

  • text/xml：XML笔墨。

  • 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 属性

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

值得注意的是：dataTransfer 对象不支撑IE。对，不支撑IE。

完成拖放排序

上面已熟习了拖放 API 的运用，我们来完成个简朴的拖放排序，这也是在项目中比较罕见的。先来理一下思绪：

  • 在一个列表中，每一个元素都可以被拖放，那首先要给每一个元素设置 draggable 属性为 true。

  • 监听每一个元素的 dragstart 事宜，对源对象做款式处置惩罚来辨别。

  • 监听每一个元素的 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>

更多文章：lin-xin/blog

    原文作者：linshuai
    原文地址: https://segmentfault.com/a/1190000009256495
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞