拖拽效果

需要提前了解的

• 运动都需要定位的支持，所以如果想实现拖拽，拖拽目标必须设置position为定位属性。
• 事件源 拖拽需要用到事件源 mouseEvent

image.png

其中clientX clientY相对于浏览器窗口，offsetX offsetY相对于父元素。

• 三个事件：onmousedown、onmousemove、onmouseup

实现思路：

1：给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键。
2：当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置。
3：在onmousemove事件中，设定目标元素的left和top，公式：
目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）。
4：当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果。
5：在onmouseup事件中，取消document的onmousemove事件即可。

具体代码

var div = document.getElementsByTagName('div')[0];
div.onmousedown = function (event1) {
    // 鼠标按下的时候开始拖拽
    //记录鼠标 在div 中的偏移
    var evt1 = window.event || event1;
    var offsetY = evt1.pageY - div.offsetTop;
    var offsetX = evt1.pageX - div.offsetLeft;

    //监听鼠标在文档中的移动
    document.onmousemove = function (event) {
        //改变 div 的坐标
        //根据鼠标坐标计算出 div 的坐标
        var evt = event || window.event;
        console.log(evt.pageX,evt.pageY);

        var divLeft = evt.pageX -offsetX;
        var divTop = evt.pageY - offsetY;

        var width = document.body.clientWidth || document.documentElement.clientWidth;
        var height = document.body.clientHeight || document.documentElement.clientHeight;

        //边界处理
        if(divTop >=0 && divTop <=  height - div.offsetHeight){
            div.style.top = divTop +'px';
        }
        if(divLeft >=0 && divLeft <=  width - div.offsetWidth){
            div.style.left  = divLeft +'px';//px
        }
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    }
}