js拖动层代码

最新推荐文章于 2025-08-08 17:07:36 发布

原创最新推荐文章于 2025-08-08 17:07:36 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #null #action #div

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现页面元素拖拽的方法。通过为指定ID的div元素添加鼠标按下事件，实现了元素在页面上的自由拖动，并在鼠标抬起时记录位置。此外，还考虑了边界情况，当拖动超出页面范围时会自动复位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//how to use
// create a div with the id, then make the action to the div
//ex:
//<div style='position:absolute' id='move_me' onMouseDown="javascript:moveStart(event,'move_me')" >i can move</div>
function $(_sId){return document.getElementById(_sId);}
function moveStart (event, _sId){
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove(){
   var oEvent = window.event ? window.event : event;
   var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
   var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
   oObj.style.left = iLeft;
   oObj.style.top = iTop;
   dragData = {x: oEvent.clientX, y: oEvent.clientY};
}
function mouseup(){
   var oEvent = window.event ? window.event : event;
   oObj.onmousemove = null;
   oObj.onmouseup = null;
   if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
    oObj.style.left = backData.y;
    oObj.style.top = backData.x;
   }
   oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}