原生js实现拖拽

onmousedown,onmousemove,onmouseup

先看js代码
.static定位:position的默认值,一般不设置position属性时,元素会按照正常的文档流进行排列。静态定位的元素不会受到top, bottom, left, right影响。


通过获取鼠标位置和目标的offset位置的差值,求出目标移动的初始位置,再通过onmousemove的鼠标位置的差值得出目标移动的x,y,赋值给目标的left,top,每次清除move和up,为了预防鼠标放上去的时候还会移动.

重中之重:移动的元素需要绝对定位,因为通过设置其left和top来实现移动的

只给添加position:relative,不添加top,left作用是:给子控件做定位使用。
他的子控件中有元素要设置positio:absolute的基准点;
子元素的absolute后的left,是相对于这个relative的左侧。如果没有设置其父元素没有设置relative;那就再往上找设置了relative的左侧;如果都没有那就是相对浏览器的左侧;

你可能感兴趣的:(原生js实现拖拽)