在 JavaScript 中捕捉拖放项目

Question

我正在尝试使用拖放将图片从一个移动<div>到另一个。

目前，我可以将图片移动到目的地的任何位置<div>，但我真正想要的是图片在放下时会对齐。理想情况下，它们可以在任何一侧（不仅仅是在底部或右侧）咬合在一起。

我尝试了一些不同的事情（包括使用<canvas>），但没有奏效。

这是我到目前为止：

var clone;
var offsetx = null;
var offsety = null;
var isClone = false;

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  offsetx = ev.target.offsetLeft - event.clientX;
  offsety = ev.target.offsetTop - event.clientY;
  
  ev.dataTransfer.setData("text", ev.target.id);
}

function dropTrash(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");
  var remove = document.getElementById(data);

  remove.parentNode.removeChild(remove);
}

function drop(ev) {
  ev.preventDefault();
  
  var data = ev.dataTransfer.getData("text");
}

function dropClone(ev) {
  ev.preventDefault();
  
  var data = ev.dataTransfer.getData("text");
  var num = Math.random() * (1000 - 1) + 1;
  
  isClone = true;   
    
  clone = document.getElementById(data).cloneNode(true);
  clone.id = "newId" + num.toString();
  clone.style.position = "absolute";
  clone.style.left = (event.clientX+offsetx)+"px";
  clone.style.top = (event.clientY+offsety)+"px"; 

  ev.target.appendChild(clone);
}	

html, body { 
  height: 100%; 
  padding: 0; 
  margin: 0; 
}

div { 
  width: 50%; 
  height: 50%; 
  float: left; 
}

#div1 { 
  background: #DDD; 
}

#div2 {
  background: #AAA; 
}

#div3 {
  background: #777; 
}

#div4 { 
  background: #444; 
}

#imgDiv {
  width: 611px;
  height: 324px;
  border: 5px solid #DDD;
}

<div id="div1">
</div>

<div id="div2">
</div>

<div id="div3" ondrop="dropTrash(event)" ondragover="allowDrop(event)">
  <img  id="drag1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg" draggable="true" ondragstart="drag(event)" width="105" height="105">
  <img  id="drag2" src="http://www.earthtimes.org/newsimage/lizard_Ngo_Van_Tri_big_281.jpg" draggable="true" ondragstart="drag(event)" width="105" height="105">	
</div>

<div id="div4">
  <div align="center" id="imgDiv" ondrop="dropClone(event)" ondragover="allowDrop(event)"></div>
</div>

Answer 1

当您开始拖动图像时，您需要存储光标相对于该特定图像的位置。

MouseEvent中有多个位置属性可以帮助您计算，但如果浏览器支持不是问题，我会选择MouseEvent.offsetX和MouseEvent.offsetY。来自文档：

offsetXMouseEvent 接口的/offsetY只读属性提供该事件和目标节点的填充边缘之间鼠标指针的X/坐标的偏移量。Y

因此，在 上dragstart，您只需执行以下操作：

x = e.offsetX;
y = e.offsetY;

然后，当您将图像拖放到画布中时（请注意斜体，因为它不是<canvas>元素，而是用作拖放区域的任何其他元素，<div>在此特定示例中为 a），您需要知道位置光标相对于画布的位置，因此您可能认为可以再次使用offsetX和offsetY，并且您是部分正确的。如果您将图像放在画布本身上，这将为您提供预期值，但其中可能已经有其他图像，并且您可以将当前图像放在另一图像之上，而是获取相对于该图像的offsetX和。offsetY

您可以做的是使用MouseEvent.pageXand并从该值中减去该画布MouseEvent.pageY元素（左上角）的位置，您可以从HTMLElement.offsetLeft和HTMLElement.offsetTop获取该位置：

e.pageX - imageCanvas.offsetLeft;
e.pageY - imageCanvas.offsetTop;

这样，您将获得光标相对于画布元素的位置。

现在，您需要减去存储在 上的x和值，这将为您提供所拖动图像相对于画布元素的左上角的 和值：ydragstartlefttop

image.style.left = (e.pageX - imagesCanvas.offsetLeft - x) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y) + 'px';

总的来说，它看起来像这样：

x = e.offsetX;
y = e.offsetY;

e.pageX - imageCanvas.offsetLeft;
e.pageY - imageCanvas.offsetTop;

image.style.left = (e.pageX - imagesCanvas.offsetLeft - x) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y) + 'px';