当鼠标左键在图片上按下时，允许图片可以拖拽
当鼠标在文档显示区范围内移动时：
如果图片允许拖拽，才根据鼠标位置，计算出图片新的位置，并移动图片
当鼠标左键在图片上抬起时，不在允许图片可拖拽
<style>
div{
position: relative;
width: 150px;
height: 150px;
background-image: url(./images/img.jpg);
background-size: 100%;
}
</style>
<body>
<div id="pop" ></div>
<script>
var pop = document.getElementById("pop");
// 提前创建一个变量，用来控制图片是否可拖拽
var canMove = false;
// 保存鼠标相对于元素本身的坐标
var offsetX, offsetY;
// 在文档显示区拖拽图片
// 1.鼠标左键按下时允许拖拽-mousedown
pop.onmousedown = function(e) {
canMove = true;
// 在鼠标按键按下时记录鼠标相对于元素本身的坐标
offsetX = e.offsetX;
offsetY = e.offsetY;
}
// 2.鼠标在移动过程中，当图片可拖拽时，记录图片移动的距离，并将图片移动到该位置-mousemove
// left/top = 鼠标位置相对于文档显示区的坐标 - 鼠标位置相对于元素本身的位置
window.onmousemove = function(e) {
if (canMove == true) {
var left = e.clientX - offsetX;
var top = e.clientY - offsetY;
}
// 当图片超出页面区域禁止移动
if (left <= 0) {
left = 0; // 左边
} else if (left > window.innerWidth - 150) {
left = window.innerWidth - 150; // 右边
} else if (top < 0) {
top = 0; // 上边
} else if (top > window.innerHeight - 150) {
top = window.innerHeight - 150; // 下边
}
pop.style.left = left + "px";
pop.style.top = top + "px";
}
// 3.鼠标左键抬起时不允许拖拽-mouseup
pop.onmouseup = function() {
canMove = false;
}
</script>
</body>
7361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
