博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5 拖拽事件
阅读量:6073 次
发布时间:2019-06-20

本文共 708 字,大约阅读时间需要 2 分钟。

拖拽包含了两个大的操作,拖拽以及释放

拖拽:drag

释放:drop

参考w3c的拖拽事件,了解一下拖拽事件的所有不同部分,这是按照拖拽的过程进行的解释

1.把元素设置为可拖拽

  设置元素的属性draggable 为true

2.拖拽什么

  ondragstart和setData 规定当元素拖拽时进行的操作

3.被拖拽的元素放到哪里

  ondragover 规定在何处放置被拖拽的元素    

  默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

  这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()

 4.进行放置

  当放置被拖数据时,会发生 drop 事件。

  之后看 冯晓东的博客,他把这些方法按照源对象和目标对象的维度又进行了一下区分

  被拖动的源对象可以触发的事件:

  (1)ondragstart:源对象开始被拖动

  (2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

  (3)ondragend:源对象被拖动结束

  拖动源对象可以进入到上方的目标对象可以触发的事件:

  (1)ondragenter:目标对象被源对象拖动着进入

  (2)ondragover:目标对象被源对象拖动着悬停在上方

  (3)ondragleave:源对象拖动着离开了目标对象

  (4)ondrop:源对象拖动着在目标对象上方释放/松手

 

 

                             ·········以上是对事件的简单介绍,,具体实现demo见下一随笔

转载于:https://www.cnblogs.com/xy-milu/p/9379137.html

你可能感兴趣的文章
Flux OOM实例
查看>>
Shell: 测试网卡当前速率的脚本
查看>>
ThinkPHP3.2使用DRDS,无法使用SHOW COLUMNS
查看>>
Python初遇坑
查看>>
状态dp
查看>>
Linux内核学习之三-进程的调度
查看>>
crontab命令
查看>>
RedHat Enterprise Linux 6配置Xmanager 4
查看>>
用户需求:只能在浏览器中浏览excel文件,不允许user下载excel文件
查看>>
ruby去消费kafka的数据并灌入hbase,git项目位置
查看>>
mysql-proxy win7 下实现读写分离
查看>>
毕设问题小记——No Dialect mapping for JDBC type:-1错误
查看>>
TCP长连接与短连接的区别
查看>>
ftp+samba+quota+rsync+inotify
查看>>
php版本差异现象
查看>>
通过 U 盘启动重装 macOS 系统
查看>>
百度员工离职总结:如何做个好员工?
查看>>
苹果地图(MKmap)获得附近的信息
查看>>
Red Hat Enterprise Linux Server release 6.3下Nagios平台的搭建
查看>>
Docker 1.12 实战 (三)容器部署
查看>>