大佬教程收集整理的这篇文章主要介绍了HTML5 Drag & Drop,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML5 Drag & Drop 是一组定义拖放行为的API,如果你想开发在线Excel之类富交互的应用,它应该能帮你节省不少时间。
拖放过程由两个部分构成:
被拖拽的元素,之后简称为子项(item)
放置被拖拽元素的元素,之后简称为容器(container)
一个将子项拖进容器的简单功能,CSS略过,以jQuery操作DOM:
<div id="container"></div> <div id="item" draggable></div>
$('#container').on('dragover',function(E){ e.preventDefault() }) $('#container').on('drop',function(E){ $('#item').appendTo(this) })
首先在子项上添加draggable
属性,表明元素可以被拖拽(发觉在Chrome中不加也可以。)
容器的dragover
事件必须禁止默认事件,否则这个容器不允许放置子项。
容器的drop
事件在子项放置到容器后触发。
可以看到,这组API只会提供简单的行为与事件接口,拖放后会发生什么,还是得由我们自己来实现。
dragstart - 拖拽开始
drag - 拖拽过程中不断触发
dragend - 拖拽结束,无论有没有拖进容器( 鼠标松开就触发 )
这3个事件与touch
系列事件很相似。
dragenter - 子项进入容器范围
dragover - 子项在容器范围内不断触发
dragleave - 子项离开容器范围
drop - 拖拽结束,且子项成功拖进容器
前3个事件与@H_672_38@mouse系列事件很相似。
dataTransfer
是这组API的核心对象,提供了许多实用功能。
dataTransfer
可以传递数据:
$('#item').on('dragstart',function(E){ e.originalEvent.dataTransfer.setData('name','kid') e.originalEvent.dataTransfer.setData('age',18) }) $('#container').on('dragover',function(E){ e.preventDefault() }) $('#container').on('drop',function(E){ e.originalEvent.dataTransfer.getData('NAME') // => 'kid' e.originalEvent.dataTransfer.getData('age') // => '18' })
key
不区分大小写,所以'name'
中的值,用'NAME'
也能取出来。若key
不存在,则返回空字符串。
value
一律转换为字符串,所以数字age
存的是数字,但取出来是字符串。
当key
为URL
时,若value
为一个合法的url值(比如'http://www.baidu.com'
),则拖拽到浏览器地址栏或标签栏会打开对应页面。
用clearData
可以清除数据,但只能在dragstart
中进行,用处不大:
$('#item').on('dragstart',18) e.originalEvent.dataTransfer.clearData('name') // 若不指定key,则清除所有数据 }) $('#container').on('dragover',function(E){ var a = e.originalEvent.dataTransfer.getData('NAME') // => '' var b = e.originalEvent.dataTransfer.getData('age') // => '18' })
容器可以用dataTransfer.dropEffect
设置一个类型,它指示了进入本容器的子项会发生什么效果:
这个效果不会自动发生。试一试就知道了,当子项拖入容器范围,则鼠标指针会变成相应类型的外观(由浏览器设定)。这是针对用户的简单提示,而不是说设置为copy
就会自动复制子项。还是那句话,由你来具体实现。
与此对应,子项通过dataTransfer.effectAllowed
属性可限定自己着陆的容器类型:
copy
link
copyLink - copy
或link
linkMove - link
或@H_672_38@move
all - @H_672_38@move或copy
或link
uninitialized - 默认值,等价于all
none - 禁止在任何容器着陆
实际使用看看:
$('#item').on('dragstart',function(E){ e.originalEvent.dataTransfer.effectAllowed = 'all' }) $('#container').on('dragover',function(E){ e.originalEvent.dataTransfer.dropEffect = 'copy' })
若两者不匹配,则子项无法放置到容器中。
在相册类应用中,拖拽照片是一个常见功能。我们可以用setDragImage
方法来设置一张图片,在拖拽过程中跟随鼠标移动:
var img = new Image() img.src = 'face-small.png' $('#item').on('dragstart',function(E){ e.originalEvent.dataTransfer.setDragImage(img,100,100) })
第一个参数设置图片,后两个参数设置鼠标相对图片的位置。比如这张图的大小是200×200,我设置100表示鼠标在图片正中心,效果示意:
另外,setDragImage
也可以接收Canvas图像,简单示例:
<canvas width="200",height="200"></canvas>
var canvas = $('canvas')[0] var ctx = canvas.getContext('2d') ctx.fillStyle="pink" ctx.fillRect(0,200,200) $('#item').on('dragstart',function(E){ e.originalEvent.dataTransfer.setDragImage(canvas,100) })
最后说一下,这组API现在基本只能用于PC端:
以上是大佬教程为你收集整理的HTML5 Drag & Drop全部内容,希望文章能够帮你解决HTML5 Drag & Drop所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。