鼠标事件 ——拖拽效果

目录

关于鼠标事件

拖拽效果

关于鼠标事件

鼠标事件类型：
    onclick 单击
    ondbclick 双击
    oncontextmenu 右侧菜单
    onmouseover 移入
    onmouseout 移出
    onmouseenter 移入
    onmouseleave 移出
    onmousedown 按下
    onmouseup  抬起
    onmousemove  移动

建议使用enter和leave 因为over和out在进入移出子级标签时会触发

拖拽效果

定义一个块<div class="drag"></div>

1.获取drag

 var drag = document.querySelector(".drag");

2.鼠标按下事件

（1）获取原位置坐标 ，左边距及上边距；

（2）鼠标移动事件获取移动过后坐标，与原数据做差值，得到重新定位和的位置

（3）修改drag位置

 drag.onmousedown = function (e1) {
        var x1 = e1.clientX;
        var y1 = e1.clientY;
        var l1 = this.offsetLeft;
        var t1 = this.offsetTop;

        // 鼠标移动事件, 计算差值, drag重新定位
        window.onmousemove = function (e2) {
            var x2 = e2.clientX;
            var y2 = e2.clientY;
            var l2 = l1 + (x2 - x1);
            var t2 = t1 + (y2 - y1);


            // 边界处理
            l2 = l2 < 0 ? 0 : (l2>window.innerWidth - drag.offsetWidth ? window.innerWidth - drag.offsetWidth: l2) ;
            t2 = t2 < 0 ? 0 : (t2>window.innerWidth - drag.offsetWidth ? window.innerWidth - drag.offsetWidth: t2) ;
            drag.style.left = l2 + 'px';
            drag.style.top = t2 + 'px';
        }
    }

3.鼠标抬起

// 当鼠标抬起时 去掉mousemove事件
    drag.onmouseup = function () {
        window.onmousemove = null;
    }