<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
.parent{position: absolute;left: 200px;top: 200px;bottom: 200px;right: 200px;background: #ccc;}
.box{position: absolute;width: 200px;height: 200px;background: #f00;}
</style>
</head>
<body>
<div class="parent">
<div class="box" id="box"></div>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
drag(box);
//此方法 兼容IE9+
function drag(element){
element.onmousedown = function(e) {
e = e || window.event;
var elementX = e.pageX - element.offsetLeft; //相对元素，鼠标的X坐标
var elementY = e.pageY - element.offsetTop; //相对元素，鼠标的Y坐标
// console.log(elementX,elementY)
var a = element.offsetWidth; //元素的宽度
var b = element.offsetHeight; //元素的高度
// console.log(a,b)
document.onmousemove = function(e) {
var x = e.pageX - elementX; //拖拽元素后的相对父级left值
var y = e.pageY - elementY; //拖拽元素后的相对父级top值
// console.log(x,y)
element.style.left = x + 'px';
element.style.top = y + 'px';
}
}
document.onmouseup = function(e) {
document.onmousemove = null
}
}
</script>
</body>
</html>
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
