HTML5拖放API实现拖放排序的实例代码


Posted in HTML / CSS onMay 11, 2017

前言

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:源对象被拖放到目标对象内。
<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 对象中存入数据。接收两个参数,第一个表示要存入数据种类的字符串,现在支持有以下几种:

  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>
<script src="vendor/ios-drag-drop.js"></script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 #HTML / CSS
Web前端页面跳转并取到值
Apr 24 #HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 #HTML / CSS
Html5新增标签有哪些
Apr 13 #HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 #HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 #HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 #HTML / CSS
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python数据结构之翻转链表
2017/02/25 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python从子线程中获得返回值的方法
2019/01/30 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
GWT都有什么特性
2016/12/02 面试题
公司周年庆活动方案
2014/08/25 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
优秀教师事迹材料
2014/12/15 职场文书
红旗渠导游词
2015/02/09 职场文书
个人廉洁自律总结
2015/03/06 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python