需要提前了解的

• 運動都需要定位的支持，所以如果想實現拖拽，拖拽目標必須設置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;
    }
}