JavaScript拖拽效果

1.1 拖拽的 基本效果

思路：

• 鼠标在盒子上按下时，准备移动 (事件加给物体)

• 鼠标移动时，盒子跟随鼠标移动 （事件添加给页面）

• 鼠标抬起时，盒子停止移动 (事件加给页面)

  var o = document.querySelector('div');
  ​
          //鼠标按下
          o.onmousedown = function (e) {
              //鼠标相对于盒子的位置
              var offsetX = e.clientX - o.offsetLeft;
              var offsetY = e.clientY - o.offsetTop;
              //鼠标移动
              document.onmousemove = function (e) {
                  o.style.left = e.clientX - offsetX + "px";
                  o.style.top = e.clientY - offsetY + "px";
              }
              //鼠标抬起
              document.onmouseup = function () {
                  document.onmousemove = null;
                  document.onmouseup = null;
              }
          }

1.2 拖拽的问题

若盒子中出现了文字ÿ