这次给大家带来H5的拖放应该如何实现,实现H5拖放效果应该的注意事项有哪些,下面就是实战案例,一起来看一下。
简介
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
先点击一个小例子:在用户开始拖动
元素时执行 JavaScript
拖动我!
提示: 链接和图片默认是可拖动的,不需要 draggable 属性。
定义和用法
在拖放的过程中会触发以下事件:
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动;在拖动元素时,每隔 350 毫秒会触发 ondragover 事件。
实例
先贴代码,再逐一解释:
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
以上是H5的拖放应该如何实现的详细内容。更多信息请关注PHP中文网其他相关文章!