<html>
<head><meta charset="UTF-8"><title>拖拽</title><style type="text/css">#box1{width: 100px;height: 100px;background-color: yellow;position:absolute;}#box2{width: 100px;height: 100px;background-color: red;position:absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload =function(){var box1=document.getElementById("box1");box1.onmousedown =function(){document.onmousemove=function(event){event =event||window.event;var left=event.clientX;var top=event.clientY;box1.style.left=left+"px";box1.style.top=top+"px";document.onmouseup = function(){document.onmousemove=null;};};};};</script>
</head>
<body><div id="box1"></div><div id="box2"></div>
</body>
</html>
主要是三个函数,onload等界面加载完成后这个不算。
mousedown鼠标按下(){
触发鼠标移动会怎么怎么样(),,,
鼠标抬起(事件结束)
}