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

##-元素拖拽原理：

     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。

来源：https://www.icode9.com/content-4-667551.html