用鼠标移动多个div元素

Question

我有一个可以用鼠标移动 div 对象的代码。

let moverclass = { 
    __init: function () { 

      var elem = document.querySelector('.mover'), 
          div = document.querySelector('.move'),
          oldX = 0, 
          oldY = 0, 
          mousedown = false; 
 
      function start(e) { 
        mousedown = true; 
        var clientX = e.clientX || e.touches[0].clientX; 
        var clientY = e.clientY || e.touches[0].clientY; 
        oldX = clientX - div.offsetLeft; 
        oldY = clientY - div.offsetTop; 
      } 
       
      function end(e) { 
        mousedown = false; 
      } 
       
      function move(e) { 
        if (mousedown) { 
          var clientX = e.clientX || e.touches[0].clientX; 
          var clientY = e.clientY || e.touches[0].clientY; 
          var newX = clientX - oldX; 
          var newY = clientY - oldY; 
          if (newX >= 0 && newX <= (elem.offsetWidth - div.offsetWidth)) { 
            div.style.left = newX + 'px'; 
          } 
          if (newY >= 0 && newY <= (elem.offsetHeight - div.offsetHeight)) { 
            div.style.top = newY + 'px'; 
          } 
        } 
      } 
 
      div.addEventListener('mousedown', start, false); 
      div.addEventListener('touchstart', start, false); 
       
      window.addEventListener('mouseup', end, false); 
      window.addEventListener('touchend', end, false); 
       
      elem.addEventListener('
', move, false); 
      elem.addEventListener('touchmove', move, false); 
    }

  }; 
 
  moverclass.__init();

但是我需要几个对象。我希望能够稍后为每个 div 分配一个图像，从而创建一个像拼图一样的单独图像。说明如下：

• 选择元素：选择要移动的所有元素，例如使用 document.querySelectorAll('.move')。
• 添加事件监听器：为每个选定的元素添加 mousedown、mouseup 和 mousemove 的事件监听器。
• 更新位置：每个元素的位置与以前类似，但在每个元素的循环中更新。

经过大量搜索，应该看起来像这样：

document.querySelectorAll('.move').forEach(item => {
  item.addEventListener('mousedown', event => {
    //handle function
  })
})

但我无法让它工作。有人可以帮忙吗？

https://codepen.io/Andre-Mischke/pen/WNWLoqr

Answer 1

你做得对，让我们试试这个代码：

let moverclass = {
  __init: function() {
    var elems = document.querySelectorAll('.mover'), // Select all parent elements containing moveable elements
      moves = document.querySelectorAll('.move'); // Select all moveable elements

    moves.forEach(div => {
      let oldX = 0,
        oldY = 0,
        mousedown = false;

      function start(e) {
        mousedown = true;
        var clientX = e.clientX || e.touches[0].clientX;
        var clientY = e.clientY || e.touches[0].clientY;
        oldX = clientX - div.offsetLeft;
        oldY = clientY - div.offsetTop;
      }

      function end(e) {
        mousedown = false;
      }

      function move(e) {
        if (mousedown) {
          var clientX = e.clientX || e.touches[0].clientX;
          var clientY = e.clientY || e.touches[0].clientY;
          var newX = clientX - oldX;
          var newY = clientY - oldY;
          if (newX >= 0 && newX <= (elem.offsetWidth - div.offsetWidth)) {
            div.style.left = newX + 'px';
          }
          if (newY >= 0 && newY <= (elem.offsetHeight - div.offsetHeight)) {
            div.style.top = newY + 'px';
          }
        }
      }

      div.addEventListener('mousedown', start, false);
      div.addEventListener('touchstart', start, false);

      window.addEventListener('mouseup', end, false);
      window.addEventListener('touchend', end, false);

      elems.forEach(elem => {
        elem.addEventListener('mousemove', move, false);
        elem.addEventListener('touchmove', move, false);
      });
    });
  }
};

moverclass.__init();

确保您的 HTML 结构反映此设置，每个 .move 元素都包含在父 .mover 元素中。