实现原理
1、给目标div增加鼠标按下事件,记录下div对象的位置(left,top)和鼠标点击的位置(x,y)
2、监听鼠标移动事件,在移动过程中计算出鼠标的移动位置(nx,xy),然后实时计算出鼠标从点击到现在的偏移量,然后再将div的位置修改,这样就实现了div位置的变动
ps:目标div的属性position要设置absolute或者relative
3、div可以移动了,但什么时候停止移动呢?当然是鼠标弹起的时候,所以我们监听鼠标弹起的事件,并结束移动
代码实现
div-drag-每天一个知识点.dragable {
width: 200px;
height: 200px;
border: 1px solid darkorchid;
position: relative;
}
代码手敲可运行
当然这个实现还有很多可扩展或者不足,比如怎么限制div移动的范围,能力有限,在以后的日子里会尝试编写js组件,实现更完善的功能。