js源码--简单的div拖动

来源：互联网发布：灭佛运动知乎编辑：程序博客网时间：2024/06/05 10:13

<html>

<head>

<div id="dTitle" style="background-color:#CCCCCC ">这是标题，拖动这里可以实现拖动效果</div>

<div id="dTxtBody">这是正文，拖动这里不可以实现拖协效果</div>

</div>

</body>

var object;

window.onload = startUp(document.getElementById("dMsgBody"));

function startUp(obj)......{

obj.onmousemove = mousemove;

obj.onmousedown = mousedown;

obj.onmouseup = mouseup;

}

function mousemove()......{

if(object!=null)......{

object.style.pixelTop = event.clientY - object.objY;

object.style.pixelLeft = event.clientX - object.objX;

}

function mousedown(event,obj)......{

obj=obj||this;

event=event||window.event;

obj.setCapture();

object=obj;

//objX = event.offsetX;

//objY = event.offsetY;

obj.objX = event.clientX-obj.style.pixelLeft;

obj.objY = event.clientY-obj.style.pixelTop;

//alert(obj.offsetTop+" "+obj.style.pixelTop) offset是和body标签的距离，所以会有空隙才能等效，所以在body上加了css

}

function mouseup()......{

if(object!=null)......{

object.releaseCapture();

object=null

}

</script>

</html>

自己写了个，这个应该是比较简单通用的