用JavaScript写可移动小块

我们最终要改变的是box的top和left，

• （一） 所以如何计算box的top和left呢 。

  • 步骤一）首先在鼠标按下时，
    • 获取到 鼠标点击位置与小块的边 的距离(这个数值在在本次移动中保持不变): divX ,divY
      鼠标距离页面的距离，e.pageX ,e.pageY
      box 距离页面的距离， box.offsetLeft , box.offsetTop
      divX + box.offsetLeft = e.pageX (Y的同理)
  • 步骤二）鼠标移动时，
    • 我们需要获取到新的 box 距离页面的距离（即box.offsetLeft , box.offsetTop，即box.style.left ，box.style.top）
      box.style.left = e.pageX（获取到新的鼠标到页面的距离） - divX（步骤一计算出来的值） (Y的同理)

• （二）整个过程中，我们需要一个变量判断 鼠标的状态 mouse

  • 鼠标按下，mouse = true;
    鼠标松开，mouse = false;

• （三）注意：

  • 1）在onmousemove中要有参数e ，获取的是新的鼠标的位置到页面的距离
  • 2）在onmousemove中要判断一下 mouse的值，确保只有在鼠标按下的时候才能移动
  • 3）onmousemove（移动）和onmouseup（松开）在onmousedown（按下）函数里面的

分析图

代码如下：