当前位置:Gxlcms > JavaScript > javascript实现拖放效果_javascript技巧

javascript实现拖放效果_javascript技巧

时间:2021-07-01 10:21:17 帮助过:4人阅读

本文实例为大家分享的是一个拖放的效果,参考的代码,重构以下,加以理解学习。

首先来看效果:

拖动div


拖放状态:未开始

【程序说明】

拖动原理:其实就是在拖动块上监听mousedown事件,鼠标点击时,通过事件对象获取对应的坐标参数。然后鼠标移动时再监听document上的mousemove事件,获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top。

首先是监听mousedown事件

代码如下:
EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));

然后在Start上添加mousemove 和 mouseup 事件

鼠标移动时,设置拖动块的left 和 top 属性 :

水平和垂直锁定:通过判断LockX 和lockY属性来限制对于的top 和 left 属性即可。

范围限制锁定:通过计算容器的宽高和拖动块的宽高差值来设定最大left值和top值,来限制拖动块的left值和top值会在一定的范围里。

完整DEMO:




 
 JavaScript拖放效果
 


 
拖动div

拖放状态:未开始

以上就是javascript实现拖放效果的代码,希望对大家的学习有所帮助。

人气教程排行