如何解决Javascript 可拖动
我正在尝试制作一个页面,用户可以在其中将图像拖放到屏幕上的任何位置: 在我的 HTML 文件中,图像具有 class = "draggable"。我无法让图像移动到拖动到的位置。下面是我的 javascript 代码:
const draggables = document.querySelectorAll('.draggable');
console.log(draggables);
var isDown = false;
draggables.forEach((draggable) => {
draggable.addEventListener('mousedown',function(e){
isDown = true;
offset = [
draggable.offsetLeft - e.clientX,draggable.offsetTop - e.clientY
];
console.log("mousedown")
},true)
document.addEventListener('mouseup',function(){
isDown = false;
},true)
document.addEventListener("mousemove",function(e){
event.preventDefault();
if(isDown){
draggable.style.left = (e.clientX + offset[0]) + 'px';
draggable.style.top = (e.clientY + offset[1] + 'px');
}
},true)
});
解决方法
FIXED 这是有效的代码:
const draggables = document.querySelectorAll('.draggable');
console.log(draggables);
var isDown = false;
var current;
draggables.forEach((draggable) => {
draggable.addEventListener('mousedown',function(e){
isDown = true;
offset = [
draggable.offsetLeft - e.clientX,draggable.offsetTop - e.clientY
];
current = draggable;
console.log("mousedown",offset)
},true)
});
document.addEventListener('mouseup',function(){
isDown = false;
console.log("mouseup")
},true)
document.addEventListener("mousemove",function(e){
event.preventDefault();
console.log("mousemove")
if(isDown){
current.style.left = (e.clientX + offset[0]) + 'px';
current.style.top = (e.clientY + offset[1] + 'px');
}
},true)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。