Question

我创建了一个小应用程序，其中有一个dragzone，其中有两个

元素。我应该有可能在这个区域内拖放这两段。下面的代码工作得很好，但是当我将一个元素放在另一个元素或放置区域的边缘时，或者有时随机将此元素移动到左上角而不是右边的位置。这真烦人！有办法解决这个问题吗？或者有更好的方法来编写这个应用程序吗？

var section = document.querySelector("#dragzone");
		var currentLabel
		
		function moveStart(e) {
			e.dataTransfer.setData('text/plain', null);
			myX = e.offsetX === undefined ? e.layerX : e.offsetX;
			myY = e.offsetY === undefined ? e.layerY : e.offsetY;
			currentLabel = e.target;
		}

		function moveDragOver(e) {
			e.preventDefault();
			e.dataTransfer.dropEffect = "move";
		}

		function moveDrop(e) {
			e.preventDefault();
			currentLabel.style.left = e.offsetX - myX + 'px';
			currentLabel.style.top = e.offsetY - myY - 10 + 'px';
		}
		
		section.addEventListener('dragstart', moveStart, false);
		section.addEventListener('dragover', moveDragOver, false);
		section.addEventListener('drop', moveDrop, false);

#dragzone {
			position: relative;
			width: 300px;
			height: 300px;
			border: 2px solid black;
		}
		p {
			position: absolute;
			top: 20px;
			left: 20px;
		}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My site</title>
  
</head>

<body>
	<div id="dragzone">
		<p draggable="true">DraggableElement1</p>
		<p draggable="true">DraggableElement2</p>
	</div>
</body>
</html>

拖放Javascript - 更好的方法

0 个答案: