使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动

使用 JS 来实现一个可拖动的DIV，主要是使用到以下几个事件：

1.鼠标按下：DIV元素的onmousedown。

2.鼠标按住拖动：document 的 onmousemove 元素。

3.鼠标放开：document 的 onmouseup 元素。

 

一、思路

1.当使用点击要拖动的 DIV 时，要首先计算出鼠标的位置与元素位置的差值：

1.1.X坐标的差值 = 鼠标当前位置的X坐标 - DIV元素的X坐标（即：左偏移量）

1.2.Y坐标的差值 = 鼠标当前位置的Y坐标 - DIV元素的Y坐标（即：上偏移量）

2.绑定 document.onmousemove 事件并改变 DIV 元素的位置。

将 DIV 元素的 position 设置成：absolute。让元素可以改变位置。

DIV 元素的X坐标 = 鼠标当前位置的X坐标 - X坐标的差值

DIV 元素的Y坐标 = 鼠标当前位置的Y坐标 - Y坐标的差值

3.绑定 document.onmouseup 事件。

当鼠标放开的时候，清除绑定 document.onmousemove 事件

 

二、代码实现

 

1.Html 代码：

<style>
    #Drag {
        /*border: 5px solid #C4E3FD;*/
        background: #C4E3FD;
        width: 50px;
        height: 50px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }
</style>

<div id="Drag" onmousedown="moveBind(this, event)">1</div>
</div>
<br />拖放状态：<span id="idShow">未开始</span>

onmousedown="moveBind(this, event)" 这里是绑定鼠标按下事件，并将当前元素对象与事件信息传入 moveBind 方法里。

2.JS代码

<script>

    function moveBind(obj, evnt) {
        //获得元素坐标。
        var left = obj.offsetLeft;
        var top = obj.offsetTop;
        var width = obj.offsetWidth;
        var height = obj.offsetHeight;

        //计算出鼠标的位置与元素位置的差值。
        var cleft = evnt.clientX - left;
        var ctop = evnt.clientY - top;

        document.onmousemove = function (doc) {
            //计算出移动后的坐标。
            var moveLeft = doc.clientX - cleft;
            var moveTop = doc.clientY - ctop;

            //设置成绝对定位，让元素可以移动。
            obj.style.position = "absolute";

            //当移动位置在范围内时，元素跟随鼠标移动。
            obj.style.left = moveLeft + "px";
            obj.style.top = moveTop + "px";

            show("idShow", moveLeft, moveTop);
        }

        document.onmouseup = function () {
            document.onmousemove = function () { }
        };
    }

</script>

其中：

//获得元素坐标。
var left = obj.offsetLeft;
var top = obj.offsetTop;
var width = obj.offsetWidth;
var height = obj.offsetHeight;

这里分别获得元素的 X 坐标， Y 坐标，宽度，高度。

        //计算出鼠标的位置与元素位置的差值。
        var cleft = evnt.clientX - left;
        var ctop = evnt.clientY - top;

evnt.clientX 和 evnt.clientY 获取到的是鼠标的位置。

然后通过上面的公式计算出差值。

obj.style.left = moveLeft + "px";

这里就是直接修改元素的 X 坐标。

其它的代码都如同上面思路所写的这里就不一一说明了。