<style>
.div1{
width: 100px;
height: 100px;
border: 1px solid;
position: absolute; //注意拖拽是 一定要写定位
}
</style>
<body>
<div class="div1"></div>
<script>
var div1 = document.querySelector(".div1");
div1.onmousedown = function (ev) {
// 1 获取鼠标在元素上的位置
var x = ev.clientX - div1.offsetLeft;
var y = ev.clientY - div1.offsetTop;
// 2 计算元素的新位置 并赋值
document.onmousemove = function(ev) {
var new_x = ev.clientX - x;
var new_y = ev.clientY - y;
div1.style.left = new_x + "px";
div1.style.top = new_y + "px";
}
//3 制空鼠标移动事件 （释放你的鼠标）
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
weixin_46174967
发布了35 篇原创文章 · 获赞 0 · 访问量 514
私信
关注