首页 > 其他 > 详细

拖拽操作

时间:2017-08-30 17:31:17      阅读:334      评论:0      收藏:0      [点我收藏+]

一、基本信息

描述:被拖拽的元素依然在原地,拖拽的相当于拖拽元素的影子

方法:

1、在标签里写draggable="true"

<li draggable="true"></li>

2、被拖拽的元素

(1)拖拽前触发

写法:元素.ondragstart = function(){ }

描述:点击被拖拽元素且开始拖拽的一瞬间触发的事件

(2)拖拽结束触发

写法:元素.ondragend= function(){ }

描述:当拖拽后鼠标抬起的时候表示拖拽结束,触发事件

(3)拖拽开始与结束之间连续触发

写法:元素.ondrag= function(){ }

描述:即时拖拽的时候停在原地不动也会一直触发

3、目标元素

(1)拖拽到目标点的时候触发

写法:元素.ondragenter= function(){ }

描述:当被拖拽的元素进入目标位置的时候触发

(2)离开目标点的时候触发

写法:元素.ondragleave= function(){ }

描述:当被拖拽的元素离开目标位置的时候触发

(3)拖拽到目标点到离开之间触发

写法:元素.ondragover= function(){ }

描述:移动到目标点后就会一直触发,即使停在目标点内不动,移出目标点的时候停止触发

拖拽操作

原文:http://www.cnblogs.com/SongHuiJuan/p/7454208.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!