正文
html5拖拽元素排序,html拖拽组件
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
Html5 的拖拽功能
HTML 5 拖放
HTML5 音频
HTML5 画布
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例
下面的例子是一个简单的拖放实例:
实例
!DOCTYPE HTML
html
head
script type="text/javascript"
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
/script
/head
body
div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"/div
img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" /
/body
/html
亲自试一试
它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
img draggable="true" /
拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
HTML5 如何实现拖拽效果
这是一个网友的代码 你可以参考一下
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
/head
script
function mstart(a){
//设置初始数据setdata()
a.dataTransfer.setData("Text",a.target.id);
}
function mover(a){
//把系统默认鼠标或拖拽操作屏蔽掉
a.preventDefault();//屏蔽系统默认的dragover引发的效果
}
function mdrop(a){
a.preventDefault();
var data=a.dataTransfer.getData("Text");
a.target.appendChild(document.getElementById(data));
}
/script
body
div id="mydiv" style="height:568px; width:500px; border:2px solid" ondragover="mover(event)" ondrop="mdrop(event)"/div
img id="myimg1" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)"
img id="myimg2" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)"
img id="myimg3" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)"
br
/body
/html
Vue中使用Sortable
之前开发一个后台管理系统,里面用到了 Vue 和 Element-UI 这个组件库,遇到一个挺有意思的问题,和大家分享一下。
场景是这样,在一个列表展示页上,我使用了 Element-UI 的表格组件,新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序,而且由于是直接引入的 Element-UI ,不方便修改它的源码,所以比较可行的方法只能是 直接操作DOM 。
具体的做法是在 mounted 生命周期函数里,对 this.$el 进行真实DOM的操作,监听 drag 的一系列事件,在事件回调里移动DOM,并更新data。
HTML5 Drag 事件还是挺多的,和 Touch 事件差不多,自己手工实现也可以,不过这里就偷了个懒,直接用了一个开源的 Sortable 库,直接传入 this.$el ,监听封装后的回调,并且根据Vue的开发模式,在移动DOM的回调里更新实际的Data数据, 保持数据和DOM的一致性 。
如果你以为到这就结束了,那就大错特错,偷过的懒迟早要还。。。本以为这个方案是很美好的,没想到刚想调试一下,就出现了诡异的现象:A和B拖拽交换位置之后,B和A又神奇得换回去了!这是怎么回事?似乎我们的操作没有什么问题,在真实DOM移动了之后,我们也移动了相应的 data ,数据数组的顺序和渲染出DOM的顺序应该是一致的。
问题出在哪里?我们回忆一下Vue的实现原理,在Vue2.0之前是通过 defineProperty 依赖注入和跟踪的方式实现双向绑定。针对v-for数组指令,如果指定了唯一的Key,则会通过高效的Diff算法计算出数组内元素的差异,进行最少的移动或删除操作。而Vue2.0之后在引入了 Virtual Dom 之后, Children 元素的 Dom Diff 算法和前者其实是相似的,唯一的区别就是,2.0之前Diff直接针对 v-for 指令的数组对象,2.0之后则针对 Virtual Dom 。DOM Diff算法在这里不再赘述,这里解释的比较清楚 virtual-dom diff算法
假设我们的列表元素数组是
渲染出来后的DOM节点是
那么Virtual Dom对应的结构就是
假设拖拽排序之后,真实的DOM变为
此时我们只操作了真实DOM,改编了它的位置,而Virtual Dom的结构并没有改变,依然是
此时我们把列表元素也按照真实DOM排序后变成
这时候根据Diff算法,计算出的Patch为, VNode前两项是同类型的节点 ,所以直接更新,即把$A节点更新成$B,把$B节点更新成$A,真实DOM又变回了
所以就出现了拖拽之后又被Patch算法更新了一次的问题,操作路径可以简单理解为
根本原因是 Virtual DOM 和 真实DOM 之间出现了不一致。
所以在Vue2.0以前,因为没有引入 Virtual DOM ,这个问题是不存在的。
在使用Vue框架的时候要尽量避免直接操作DOM
3.暴力解决!不走patch更新,通过v-if设置,直接重新渲染一遍。当然不建议这么做,只是提供这种思路~
所以,我们平时在使用框架的时候,也要去了解框架的实现原理的,否则遇到一些棘手的情况就会无从下手~
HTML5如何实现元素拖拽
在拖放的过程中会触发以下事件:
在拖动目标上触发事件 (源元素)
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
event对象(以e代替)
e.target
W3Cschool上的解释是:返回触发此事件的元素(事件的目标节点),这个target属性只兼容ie9及以上
e.preventDefault()
取消事件的默认动作。
e.dataTransfer.setData()
设置被拖数据的数据类型和值。
e.dataTransfer.getData()
获得被拖的数据。
html5拖拽元素排序的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html拖拽组件、html5拖拽元素排序的信息别忘了在本站进行查找喔。