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)