本文实例为大家分享的是一个拖放的效果，参考的代码，重构以下，加以理解学习。
首先来看效果：
拖动div
拖放状态：未开始 
【程序说明】
拖动原理：其实就是在拖动块上监听mousedown事件，鼠标点击时，通过事件对象获取对应的坐标参数。然后鼠标移动时再监听document上的mousemove事件，获取鼠标的clientx 和clienty坐标然后设置拖动块的left 和 top。
首先是监听mousedown事件
复制代码 代码如下:
eventutil.addeventhandler(this.drag, mousedown, bindaseventlistener(this, this.start));
然后在start上添加mousemove 和 mouseup 事件//监听mousemove 和 mouseup事件eventutil.addeventhandler(document, mousemove, this._fm);eventutil.addeventhandler(document, mouseup, this._fs);
鼠标移动时，设置拖动块的left 和 top 属性 ：
if(!this.lockx)this.drag.style.left = ileft + px; if(!this.locky)this.drag.style.top = itop + px;
水平和垂直锁定：通过判断lockx 和locky属性来限制对于的top 和 left 属性即可。
范围限制锁定：通过计算容器的宽高和拖动块的宽高差值来设定最大left值和top值，来限制拖动块的left值和top值会在一定的范围里。
完整demo：
javascript拖放效果 拖动div
拖放状态：未开始
以上就是javascript实现拖放效果的代码，希望对大家的学习有所帮助。