写一个可以拖拽的div

思路

我们现在做的一切是为了得到拖拽div的位置

  1. 使用什么定位: 作为一个拖动元素,不能占住初始位置,所以使用绝对定位

  2. 如何获得位置: 根据鼠标的位置来改变div的位置

  3. 位置计算:用鼠标属性clientX和clientY与初始值的差来计算div的位置

  4. 监听这个div的三个事件
    mousedown(获取初始值,开始拖拽)
    mousemove(计算div的位置)
    mouseup(结束拖拽)

  5. 两个变量:
    5.1 dragging用来控制拖拽的始终(初始为false)
    5.2 position用来记录历史位置(初始为null)

注意:

  1. 除了mousedown,另外两个事件都不能绑定在可拖动div上,因为快速拖动时可能会导致div丢失
  2. 非行内样式无法被.style获取

代码在这里

你可能感兴趣的:(写一个可以拖拽的div)