html 简单 div 拖动

最新推荐文章于 2023-10-10 20:12:30 发布

原创最新推荐文章于 2023-10-10 20:12:30 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现拖拽效果的方法。通过监听鼠标按下、移动及释放等事件，可以实时更新元素的位置，使得div元素能够跟随鼠标进行移动。

解决: div的 onclike ( this ) 得到选择
由 window.event 得到鼠标 x y
由 this.style.top/left 改变 div 位置

var x,y;
function mousedown(obj)
{
obj.onmousemove = mousemove;
obj.onmouseup = mouseup;

oEvent = window.event ? window.event : event;
x = oEvent.clientX;
y = oEvent.clientY;
}
function mousemove()
{
oEvent = window.event ? window.event : event;
var _top = oEvent.clientY - y + parseInt(this.style.top) + "px"; // oEvent.clientY - y 为div 上移动的位置再反映到 //parseInt(this.style.top)
var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
this.style.top = _top;
this.style.left = _left;
x = oEvent.clientX;
y = oEvent.clientY
}
function mouseup()
{
this.onmousemove = null;
this.onmouseup = null;
}