div滚动条怎么设置_js实现一个可拖动的div

先看下效果图

实现原理

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组件，实现更完善的功能。