使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动

时间:2022-03-30 10:15:26

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

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