1. HTML5 拖拽
1.1 相关知识
拖拽元素:可以为元素添加 draggable="true"
来让元素能够被拖拽。
拖拽元素的事件监听:(应用于拖拽元素)
-
ondragstart
当拖拽开始时调用 -
ondragleave
当鼠标离开拖拽元素时调用 -
ondragend
当拖拽结束时调用 -
ondrag
整个拖拽过程都会调用
目标元素:把元素A拖拽到元素B里,那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。
目标元素的事件监听:(应用于目标元素)
-
ondragenter
当拖拽元素进入时调用 -
ondragover
当拖拽元素停留在目标元素上时,就会连续一直触发(不管拖拽元素此时是移动还是不动的状态) -
ondrop
当在目标元素上松开鼠标时调用 -
ondragleave
当鼠标离开目标元素时调用
如果想让拖拽元素在目标元素里做点事情,就必须要在 ondragover()
里加event.preventDefault()
这一行代码。
1.2 拖拽基础
Document
1.3 将 A 在 B、C 之间拖拽
Document boxB
12345boxC
效果展示
2. 用 js 实现拖拽
2.1 js 简单拖拽
按下鼠标进行简单的拖拽。
Document
效果展示
2.2 带效果的拖拽
Document 请选择拖拽的方式
效果展示
有时会卡顿,未解决…
到此这篇关于html5 拖拽及用 js 实现拖拽的文章就介绍到这了,更多相关html5 拖拽内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
网站类容多为转载,如有侵权,请联系站长删除
上一个:html5小程序飞入购物车(抛物线绘制运动轨迹点)HTML5 本地存储实现购物车功能用CSS样式生成搜索、购物车等图标样式(图标字体库)
下一个:HTML5实现移动端点击翻牌功能移动端Html5中百度地图的点击事件移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法