HTML5 drag和drop的亲手实践
起因
最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序。因此,这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍,然后自己亲手实践了一下,毕竟打码,才能变得更强。
首先,先放一个我的demo,大家可以去那里随便拖动一下玩一玩:
https://chenjigeng.github.io/example/drag.html
知识储备
与drag和drog有关的属性和事件
- draggable属性: 如果你想让一个元素变得可以拖曳的话,那么你就必须设置它的draggable=true,如下
<div class='target' draggable="true"></div>
这样,该元素就可以拖动了
- ondragstart: 当元素开始被拖动时,触发该事件,目标对象是被拖动的元素
- ondragover: 当被拖动元素在悬挂元素上移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。
- ondragleave: 当被拖动元素离开悬挂元素时,触发该事件。目标对象是被拖动元素悬挂的那个元素。
- ondrop: 当鼠标松开被拖动元素的时候,触发该事件。目标对象是被拖动元素悬挂的那个元素。
- ondragend: 当鼠标松开被拖动元素的时候,触发该事件。目标对象是被拖动的元素。其中,ondrop事件会先于ondragend事件触发。
- event.preventDefault: 当触发ondragover事件的时候,必须使用event.preventDefault(),否则的话,ondrop事件就不会触发
- event.dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。可设置的属性很多,这里我们就不细说,感兴趣的可以去查下,一般来说,我们都设置为"move".
插入节点的方法
- 将节点插入到另一个节点前面,代码如下
function insertBefore(insertNode, node) {
node.parentNode.insertBefore(insertNode, node)
}
这个其实比较简单,就是找到节点的父亲,然后将要插入的节点放到节点的前面。
- 将节点插入到另一个节点后面,代码如下图
function insertAfter(insertNode, node) {
if (node.nextElementSibling) {
insertBefore(insertNode, node.nextElementSibling)
} else {
node.parentNode.appendChild(insertNode)
}
}
这个其实也挺简单的,就是如果该节点有兄弟节点的话,那么就将插入节点放到它兄弟节点的前面,否则,则说明该节点是父节点的最后一个节点,因此直接将插入节点放到父节点的末尾。
实践
在这里,我们要做的就是一个支持各个图片拖曳来交换位置的玩意,不过,当图片交换位置的时候,不单单是图片交换位置,而是包含图片的容器交换位置。
1.我们先放置几张图片,并且将它们的dragable设置为true,这样它们就可以拖动了。代码如下:
<body>
<div class='target' draggable="true">
<img src="./imgs/1.jpeg" alt="1">
</div>
<div class='target' draggable="true">
<img src='./imgs/2.jpg' />
</div>
<div class='target' draggable="true">
<img src="./imgs/3.jpg" alt="ss">
</div>
<div class='target' draggable="true">
<img src="./imgs/4.jpg" alt="ss">
</div>
</body>
效果:
2.为每个div都设置一个ondragstart函数,当该函数触发的时候,进行初始化操作,比如记录当前的目标对象,拖动目标的y值,以及设置拖动的效果。
// 拖动的目标对象
let target = ''
// 拖动的目标对象的y值
let targetOffsetTop = 0
// 当元素开始被拖动时,触发该事件,目标对象是被拖动的元素
function handleDragStart(ev) {
target = findTarget(ev.target)
targetOffsetTop = ev.target.offsetTop
ev.dataTransfer.effectAllowed = 'move'
}
// 找到类名为target的目标对象
function findTarget(node) {
if (!node || node == document) {
return null
}
if (node.classList.contains('target')) {
return node;
}
return findTarget(node.parentNode)
}
3.为每个div注册一个ondragover事件和ondragleave事件,在ondragover事件里,主要是调用event.preventDefault来防止ondrog不会被触发,并且为了看起来更明显,当ondragover事件触发的时候,为目标对象增加一个dotted类。当ondragleave事件触发的时候,则把dotted类从目标对象移除。
// 当被拖动元素在悬挂元素上移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。
// 必须执行event.preventDefault(),不然的话ondrop不会触发
function handleDragOver(ev) {
ev.preventDefault();
ev.target.classList.add('dotted')
}
// 当被拖动元素离开悬挂元素时,触发该事件。目标对象是被拖动元素悬挂的那个元素。
function handleDragLeave(ev) {
ev.target.classList.remove('dotted')
}
4.为每个div注册ondrog事件和ondragend事件,ondrog事件是重点,它主要是根据被拖动元素和被拖动元素悬挂的那个元素的坐标,来决定是要将被拖动元素插入到悬挂元素的前面还是后面。而ondragend主要是用于将target设置为null,代码如下:
// 当鼠标松开被拖动元素的时候,触发该事件。目标对象是被拖动元素悬挂的那个元素。
function handleDrog(ev) {
let resultOffsetTop = ev.target.offsetTop
if (targetOffsetTop < resultOffsetTop) {
insertAfter(target, findTarget(ev.target))
}
else {
insertBefore(target, findTarget(ev.target))
}
ev.target.classList.remove('dotted')
}
// 将节点插入到另一个节点前面
function insertBefore(insertNode, node) {
node.parentNode.insertBefore(insertNode, node)
}
// 将节点插入到另一个节点后面
function insertAfter(insertNode, node) {
if (node.nextElementSibling) {
insertBefore(insertNode, node.nextElementSibling)
} else {
node.parentNode.appendChild(insertNode)
}
}
// 当松开鼠标的时候,触发该事件。目标对象是被拖动的对象
function handleDragEnd(ev) {
target = null
}
这样子,我们就实现了一个可以通过拖曳来改变图片顺序的一个小玩意啦~完整的代码放到https://github.com/chenjigeng/something 上了~有兴趣的可以git clone下来跑一跑
本文地址在->本人博客地址, 欢迎给个 start 或 follow
HTML5 drag和drop的亲手实践的更多相关文章
- html5 drag and drop
注:链接.图片默认是draggable的. mousemove在整个拖放的过程中不会被触发. dragStart设置: e.dataTransfer.effectAllowed = "mov ...
- 20 Best Drag and Drop jQuery Plugins--reference
reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...
- angularjs drag and drop
angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...
- 使用 Drag and Drop 给Web应用提升交互体验
什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程. 我相信每个人 ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- 通过HTML5的Drag and Drop生成拓扑图片Base64信息
HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...
- 基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
随机推荐
- 屌丝技能--转Json(Newtonsoft.Json.dll)
妈妈再也不用为我转Json而担忧了!! 很简单,没什么好说明的,嗯! public class ShowTablePage<T> where T : class, new() { publ ...
- 测试工具——JMeter
本学期新学的课程,软件测试,上机的实验用到了C++Test,QTP,还有JMeter.今天针对JMeter做一次总结,方便以后用到,知道步骤会更加方便. 首先,对Jmeter进行一个大致的了解,包括对 ...
- Android6.0-运行时权限处理
为什么需要有运行时权限? 大家都知道在Android6.0之前,权限在应用安装过程中只询问一次,以列表的形式展现给用户,如果点击取消(即不认可应用所申请的权限),则会取消应用的安装.而用户出于安装应用 ...
- 为什么很多人使用#define而不是const定义常量
众所周知,C语言一开始只有#define,C程序员用#define定义符号常量.但后来ANSI C加入了const限定符,而const应该比#define更好,为什么现在的C程序员还在大量使用#def ...
- nodeJS之流stream
前面的话 当内存中无法一次装下需要处理的数据时,或者一边读取一边处理更加高效时,我们就需要用到数据流.NodeJS中通过各种Stream来提供对数据流的操作.本文将详细说明NodeJS中的流strea ...
- iOS,Android,Jave后台AES加密解密
AES256 在iOS和Android上的相关代码: http://www.tuicool.com/articles/RVFbmmU 里面可以下载相关的代码. 我们遇到的问题是: 把Android的代 ...
- 提高java编程质量 - (五)switch语句break不能忘以及default不同位置的用法
先看一段代码: public class Test{ public static void main(String[] args){ System.)); } } public static Stri ...
- go 基础语法
时间有限,简单记一些常用的,麻烦的不写了 定义变量:可以连续定义,也可以单个定义 var a int int类型 var a="ds" 默认string类型 a:=&qu ...
- asp.net core中负载均衡场景下http重定向https的问题
上周欣喜地发现,微软官方终于针对 asp.net core 在使用负载均衡的情况下从 http 强制重定向至 https 的问题提供了解决方法. app.UseForwardedHeaders(new ...
- Easyui设置动态表格,动态导出数据实例,附Dome
最近碰到一个需求,需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 下面直接上代码 1.设置需要显示的列columus为全局对象,用于子 ...