使用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 坐标。

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