js面向对象开发之--元素拖拽

Posted 2021-03-03 木易锅巴

##-元素拖拽原理：

     1.鼠标按下时开始拖拽

     2.记录按下时的鼠标位置 和 元素位置

     3.移动后获取到鼠标的新位置

     4.用鼠标的新位置 - 摁下时的鼠标位置 = 鼠标移动的距离

     5.元素当前新位置 = 鼠标移动距离 + 按下时元素的位置

    class Drag {
      // 构造函数
      constructor(el) {
        this.el = el;
        // 鼠标按下时元素的的位置
        this.startOffeset = {};
        // 鼠标按下时的鼠标的位置
        this.startPoint = {};
        let move = (e) => {
          this.move(e);
        }
        let end = (e) => {
          el.removeEventListener(\'mousemove\', move);
          el.removeEventListener(\'mouseup\', end);
        }
        el.addEventListener(\'mousedown\', (e) => {
          this.start(e);
          el.addEventListener(\'mousemove\', move);
          el.addEventListener(\'mouseup\', end);
        });
        
      }

      // 鼠标摁下时的处理函数
      start(e) {
        let { el } = this;
        this.startOffeset = {
          x: el.offsetLeft,
          y: el.offsetTop,
        };
        this.startPoint = {
          x: e.clientX,
          y: e.clientY,
        }
      }

      // 移动时的处理函数
      move(e) {
        let { el, startOffeset, startPoint } = this;
        let nowPoint = {
          x: e.clientX,
          y: e.clientY,
        };

        let dis = {
          x: nowPoint.x - startPoint.x,
          y: nowPoint.y - startPoint.y
        }
        el.style.left = dis.x + startOffeset.x + \'px\';
        el.style.top = dis.y + startOffeset.y + \'px\';
      }

    }

拖拽类调用：

    (function(){
      let box = document.querySelector(\'#box\');
      let dragBox = new Drag(box);
    }());

 

备注：摘自高级javascript

var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){
        alert(this.id);
}, false);

//这里省略了其他代码

btn.removeEventListener("click", function(){ //没有用! alert(this.id);

}, false);

在这个例子中，我们使用 addEventListener()添加了一个事件处理程序。虽然调用 remove- EventListener()时看似使用了相同的参数，但实际上，第二个参数与传入 addEventListener()中 的那一个是完全不同的函数。而传入 removeEventListener()中的事件处理程序函数必须与传入 addEventListener()中的相同，如下面的例子所示

 var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    };
    btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效

重写后的这个例子没有问题，是因为在 addEventListener()和 removeEventListener()中使 用了相同的函数handler。