html新特性——拖拽(drag和drop)

html新特性——拖拽(drag和drop),第1张

拖动元素增加draggable="true"属性;

接受拖过来的元素要接受新元素,ondragover 事件触发的时候要禁止自设的默认事件e.preventDefault()

监听ondrop事件,将元素进行插入appendChild;

选一个图片,拖动到指定的盒子内点击Delete后可删除。

HTML拖放选择图片、删除选择功能,上边有几个按钮,分别是选择全部,全部不选,删除,也可以鼠标点选任意一个图片,将图片拖动到指定的盒子内,再点击Delete后可删除。

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

在拖放的过程中会触发以下事件:

在拖动目标上触发事件 (源元素)

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

event对象(以e代替)

e.target

W3Cschool上的解释是:返回触发此事件的元素(事件的目标节点),这个target属性只兼容ie9及以上

e.preventDefault()

取消事件的默认动作。

e.dataTransfer.setData()

设置被拖数据的数据类型和值。

e.dataTransfer.getData()

获得被拖的数据。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7491441.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-06
下一篇 2023-04-06

发表评论

登录后才能评论

评论列表(0条)

保存