版权声明：https://blog.csdn.net/qq_37618797 https://blog.csdn.net/qq_37618797/article/details/82953154
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽功能</title>
</head>
<body>
<div style="width:100px;height: 100px;background-color: red;
position:absolute;left:0;top:0;"></div>
<script type="text/javascript">
//获得div
var div = document.getElementsByTagName('div')[0];
drag(div);
function drag(elem) {
var disX,
disY;
elem.onmousedown = function (e) {
//兼容性操作
var event = e || window.event;
//鼠标按下的时候,距离元素的左/上距离
disX = event.pageX - parseInt(elem.style.left); //elem.style.left 返回的是字符串 XXXpx,
disY = event.pageY - parseInt(elem.style.top); //用parseInt方法可以将数字提取出来
document.onmousemove = function (e) {
var event = e || window.event;
//鼠标按下的点(相对document) - 鼠标按下的点(相对当前点击的元素)
elem.style.left = event.pageX - disX + "px";
elem.style.top = event.pageY - disY + "px";
}
//当鼠标按上时,使move事件失效,这样元素就不会再跟着移动了
document.onmouseup = function(e){
document.onmousemove = null;
}
}
}
</script>
</body>
</html>