用鼠标事件写 拖拽

用鼠标事件写 拖拽 所需要的三个事件

　　onmousedowm / onmousemove / onmouseup

遇到的问题及解决

　　如果把移动事件放在box上，那么当鼠标移动快的时候，鼠标会脱离盒子，导致盒子不跟着鼠标走。

　　解决：把移动事件放在document上，就能解决

 

　　如果把抬起事件放在box上，那么鼠标放到了浏览器的地址栏时，松开鼠标还会导致盒子一直跟着鼠标走。

　　解决：把抬起事件放在document上

 

　　当页面中有文字（图片）并且选中的时候，那么会有浏览器的默认行为（使得拖拽元素拖动和抬起有问题）

　　解决：在按下的时候阻止默认行为：

　　　　DOM 0：return false

　　　　DOM2 ：ev.preventDefault()

解除事件绑定 ：

　　普通绑定：

　　　　　ele.onmouseup = null

　　ES6绑定：

　　　　元素 . removeEventListener ( "不带on的事件名"，函数名）

　　　　ele.removeEventListener("mousemove",this.m)

例子1：拖拽盒子ES6的类+DOM2事件绑定练习

<body>
<div id="box" style="width: 100px;height:100px;background-color: red;position: absolute" ></div>
<script>
    class Drag{
        constructor(id){
            this.disX = 0;
            this.disY = 0;
            this.box = document.getElementById(id);
            this.m = this.move.bind(this);
            this.u = this.up.bind(this)
        }
        init(){
            this.box.addEventListener("mousedown",this.down.bind(this))
        }
        down(ev){
            this.disX = ev.pageX - this.box.offsetLeft;
            this.disY = ev.pageY - this.box.offsetTop;
            document.addEventListener("mousemove",this.m);
            document.addEventListener("mouseup",this.u)
        }
        move(ev){
            this.box.style.left = ev.pageX - this.disX + "px";
            this.box.style.top = ev.pageY - this.disY + "px"
        }
        up(){
            document.removeEventListener("mousemove",this.m);
            document.removeEventListener("mouseup",this.u);
        }
    }
    let xxx = new Drag("box");
    xxx.init();
</script>
</body>

 

 

posted @ 2018-11-20 12:12  真的想不出来  阅读(307)  评论(0)  编辑  收藏  举报