HTML5 进阶系列:拖放 API 实现拖放排序
前言
HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。
想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可。
拖放事件
拖放事件由不同的元素产生。一个元素被拖放,他可能会经过很多个元素上,最终到达想要放置的元素内。这里,我暂时把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素我称为目标对象。不同的对象产生不同的拖放事件。
原文作者:林鑫,作者博客:https://github.com/lin-xin/blog
源对象:
- 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 属性
这两个属性结合起来设置拖放的视觉效果。
值得注意的是:IE 不支持 dataTransfer 对象。对,不管哪个 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
转载于:https://www.cnblogs.com/linxin/p/6794542.html
HTML5 进阶系列:拖放 API 实现拖放排序相关推荐
- html5 indexeddb 排序,HTML5 进阶系列:indexedDB 数据库
前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...
- HTML5 进阶系列:indexedDB 数据库
前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...
- html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...
- html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- HTML5拖放API,回收站效果
目录 最终展示结果: API概念: 源码: html及js部分 css部分: image资源 最终展示结果: API概念: ----来自百度百科 API之主要目的是提供应用程序与开发人员以访问一组例程 ...
- HTML5自动生成相框,HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- 基于HTML5拖放API:目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能,用户可以选择本地图片文件然后为其添加相框效果
这是一份很简单的作业,由于百度当时没找到,就自己写了一下,命名不是很机智只是为了写的快且好懂,使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片,代码很短好理解.. <!DOCTYP ...
- html5相框,科技常识:HTML5拖放API实现自动生成相框功能
今天小编跟大家讲解下有关HTML5拖放API实现自动生成相框功能 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5拖放API实现自动生成相框功能 的相关资料,希望小伙伴们看了有所帮 ...
- html拖放api之图片相框,html5拖放API简介及应用
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 通常我们在上传文件时,需要使用 这样的上传文件标签.而在html5中,它提供了拖放的接口,以下的内容就是对html5拖放 ...
最新文章
- Android NDK 导出独立工具链
- Linux 内核超时导致虚拟机无法正常启动
- Android面试题目之(七) AsyncTask的原理是什么?
- knn实战:如何对手写数字进行识别?
- Spring Boot –现代Java应用程序的基础
- AI助手智商测评Siri进步最大,无人驾驶打车服务已在美国试行
- python中0o10_Python基础10—I/O编程
- stm32 网络 服务器通信协议,利用stm32的lwip TCP/IP协议栈的通信的思路
- linux 间隔时间中断测试
- hyperledger caliper 测试配置yaml
- 使用thinkphp搞了一个简单的三级分销
- 计算机网络华为模拟器,华为模拟器eNSP Win10版
- vue页面引用百度地图怎么让百度logo不显示
- 计算机组成原理sp接口,计算机组成原理2008年4月真题试题(02318)
- 申宝证券-A股三大指数集体高开
- java是要在安装的盆运行吗,Java程序员(单身30年):告诫各位,千万不要和女程序员做同事!...
- openGauss数据库安全指导手册
- win10修复tcp驱动服务器,怎么解决tcpip.sys文件导致蓝屏|Win10的tcpip修复工具
- DelphiXE Update1
- 芯来科技开源软件调试命令解析(nuclei-linux-sdk、openocd.cfg)
热门文章
- 深入理解HTML表格
- [Java] super关键字:引用父类成员
- How to publish in an open world?
- communication with respect to scholars
- career opportuties
- IEEE R10 2021 Special Call For Proposals Related To CoViD‘19
- 来自22岁的大学生的体检报告:x光显示双肺纹理增多
- C++类模板特化全总结
- mysql innodb创建数据文件失败
- 剑指offer第二版-9.用两个栈实现队列