问题：在拖放之前克隆对象

如何解决问题：在拖放之前克隆对象

为了保持原始元素在其位置，我想克隆它并拖动克隆的元素。到目前为止它有效。但是，如果我对要克隆的元素进行“双击”（在拖动之前），则会得到两个克隆对象，并且放置会插入两个元素而不是一个元素。有人可以帮我解决这个问题。我尝试使用一个额外的事件监听器来处理 mouseup。我没有找到解决方案。我想它很简单，但目前我看不到它......感谢您的帮助！

这里是我整个代码的缩减部分：

let basicElement = document.getElementById('basicElement');
basicElement.addEventListener('mousedown',mousedown);

// press element...
function mousedown(e){
  console.log('mouse down');
  e.stopPropagation();
  
  // clone element
  let elementToDrag = basicElement.cloneNode(true);
  elementToDrag.id = new Date().getMilliseconds();

  // get target
  let divTarget = getElementById('divTarget');

  // add event listener for drag and drop
  basicElement.addEventListener('dragstart',dragstart);
  basicElement.addEventListener('dragend',dragend);

  divTarget.addEventListener('dragover',dragover);
  divTarget.addEventListener('drop',drop);
  
  function dragstart(e){
    console.log('drag start');
    basicElement.classList.add('dragging');
  }

  function dragover(e){
    console.log('drag over');
    e.preventDefault();
  }

  function drop(e){
    console.log('drop');
    divTarget.appendChild(panelToDrag);
  
  }

  function dragend(e){
    console.log('drag end');

    basicElement.classList.remove('dragging');

    basicElement.removeEventListener('dragstart',dragstart);
    basicElement.removeEventListener('dragend',dragend);
    divTarget.removeEventListener('dragover',dragover);
    divTarget.removeEventListener('drop',drop);
  }
}

解决方法

感谢您的帮助，它在我的代码中不起作用。但是您给了我以下解决方案的提示：

let basicElement = document.getElementById('basicElement');
basicElement.addEventListener('mousedown',mousedown);
// new flag
let isDragging = false;

// press element...
function mousedown(e){
  console.log('mouse down');
  e.stopPropagation();
  // Stop cloning if we have click at it once
  if(isDragging == false) {
    // clone element
    let elementToDrag = basicElement.cloneNode(true);
    elementToDrag.id = new Date().getMilliseconds();
    isDragging = true;
  } else {
    if (isDragging){
      console.log(isDragging);
      return;
    }
  }

  
  

  // get target
  let divTarget = getElementById('divTarget');

  // add event listener for drag and drop
  basicElement.addEventListener('dragstart',dragstart);
  basicElement.addEventListener('dragend',dragend);

  divTarget.addEventListener('dragover',dragover);
  divTarget.addEventListener('drop',drop);
  
  function dragstart(e){
    console.log('drag start');
    // Reset isDragging if drag starts
    isDragging = false;
    basicElement.classList.add('dragging');
  }

  function dragover(e){
    console.log('drag over');
    e.preventDefault();
  }

  function drop(e){
    console.log('drop');
    divTarget.appendChild(panelToDrag);
  }

  function dragend(e){
    console.log('drag end');

    basicElement.classList.remove('dragging');

    basicElement.removeEventListener('dragstart',dragstart);
    basicElement.removeEventListener('dragend',dragend);
    divTarget.removeEventListener('dragover',dragover);
    divTarget.removeEventListener('drop',drop);
  }
}

,

mousedown 将创建一个克隆元素，只需单击 basicElement 将创建更多克隆元素，这些元素都可以被删除。 mousedown 还创建了一个事件侦听器，用于随每个克隆元素一起删除。

一个简单的方法是添加一个标志。

let basicElement = document.getElementById('basicElement');
basicElement.addEventListener('mousedown',mousedown);
// new flag
let isDragging = false;

// press element...
function mousedown(e){
  console.log('mouse down');
  e.stopPropagation();
  // Stop cloning if we have click at it once
  if(isDragging) {
     return;
  }
  
  // clone element
  let elementToDrag = basicElement.cloneNode(true);
  elementToDrag.id = new Date().getMilliseconds();

  // get target
  let divTarget = getElementById('divTarget');

  // add event listener for drag and drop
  basicElement.addEventListener('dragstart',drop);
  
  function dragstart(e){
    console.log('drag start');
    basicElement.classList.add('dragging');
  }

  function dragover(e){
    console.log('drag over');
    e.preventDefault();
  }

  function drop(e){
    console.log('drop');
    divTarget.appendChild(panelToDrag);
    // Reset isDragging once it's over
    isDragging = false;
  }

  function dragend(e){
    console.log('drag end');

    basicElement.classList.remove('dragging');

    basicElement.removeEventListener('dragstart',drop);
  }
}

这解决了这个问题，但这只适用于一个目标和一个来源。如果是多对多，则需要考虑注册 id 而不是使用布尔标志。