javascript - 带坐标的 HTML5 拖放

Question

我是 Javascript 的新手，我遇到了一个我什至无法解决的任务..

我必须得到一个 HTML 5 拖放，它可以添加尽可能多的元素，如果我想编辑一个新元素或更改位置，它必须很容易。

这是现在的样子:

http://picul.de/view/HRO

目前这并不能满足我的需要..

谁能帮帮我？

			var dragok = false;
			var pos;
			
			function allowDrop(e) 
			{
				e.preventDefault();
			}
			
			
			function get_pos(e)
			{
				pos = [e.pageX , e.pageY];
			}
			
			function drag(e) 
			{
				e.dataTransfer.setData("Text",e.target.id);
			}
			
			function drop(e) 
			{
      
        e.preventDefault();
				var canvas = document.getElementById("graphCanvas");
				var ctx	   = canvas.getContext("2d");					

				var offset = e.dataTransfer.getData("text/plain").split(',');
				var data=e.dataTransfer.getData("Text");

				var img = canvas = document.getElementById(data);
				var dx = pos[0] - img.offsetLeft;
				var dy = pos[1] - img.offsetTop;
				ctx.drawImage(document.getElementById(data), e.pageX - dx-170, e.pageY - dy-100);
				
				
			}

			function getCoordinates(e)
			{
			
				var canvas = document.getElementById("graphCanvas");
				var ctx	   = canvas.getContext("2d");
				x=ctx.clientX;
				y=ctx.clientY;
				document.getElementById("footerCoord").innerHTML="Coordinates: (" + x + "," + y + ")";
			}

body {
	
	background:#eee;
	
}

#DnDBox {
	
	margin:0 auto;
	margin-top:7vh;
	width:80vw;
	height:80vh;
	padding:1vmax;
	background:#f5f5f5;
	
	/* Erstmal nur zur Übersicht */
	border:1px solid #111;
}

	#DnDBox #canvasBox {
		
		border:1px solid #111;
		
	}
		
	#DnDBox .leftBox {

		float:right;
		width:25%;
		height: 90%;

	}

		#DnDBox .leftBox select{

			width:100%;
			padding:5px;
			margin-bottom:5px;

		}

		#DnDBox .leftBox .dragBox{

			float:right;
			width:100%;
			height: 90%;
			
			/* Erstmal nur zur Übersicht */
			border:1px solid #111;	

		}
		
			#DnDBox .leftBox .dragBox ul{

				list-style-type: none;
				margin: 0;
				padding: 0;

			}
			
				#DnDBox .leftBox .dragBox ul > li{
					
					float:left;
					padding:20px;
					text-align:center;
					background:#eee;
					
				}
				
				#DnDBox .leftBox .dragBox ul > li:hover{
		
					padding:20px;
					text-align:center;
					background:#ddd;
					
				}
		
		#DnDBox .leftBox img{

			cursor:move;
			
		}
		
		#DnDBox .leftBox img:active{

			cursor:move;
			
		}
		
	#DnDBox footer {
	
		float:left;
		margin-top:5px;
		
		padding:5px;
		
		width:100%;

		border:1px solid #111;
		
	}	

		<div id="DnDBox">
			<canvas id="graphCanvas" onmousemove="getCoordinates(event)" ondrop="drop(event)" ondragover="allowDrop(event)" height=400 width=700 style="border:1px solid #000000;"></canvas>	

			<div class="leftBox">

				<select name="plh1">
					<option>Test</option>
					<option>Test 1</option>
					<option>Test 2</option>
					<option>Test 3</option>
				</select>

				<select name="plh2"></select>
				
				<div class="dragBox">
					<ul>
						<li><img id="img1" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" draggable="true" onmousedown="get_pos(event)"  ondragstart="drag(event)"/></li>
						<li><img id="img2" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>				
						<li><img id="img3" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>				
					</ul>
				</div>
			</div>
			
			<footer id="footerCoord">asd</footer>
		</div>

问候，丹尼尔

Answer 1

如果没有额外的支持，您无法将绘制的图像拖到 Canvas 上 - 绘制的图像只是一组像素，是 Canvas 图像数据的一部分。

您可能对名为 Fabric.js(tag 和 homepage)的 Canvas 库感兴趣。我不是这样“推荐”它的——我没有使用过它——但你当然可以在主页上拖动库创建的 Canvas 对象。

一个更简单的解决方案可能是在没有 Canvas 的情况下使用 JavaScript/HTML。将 Canvas 替换为相对 DIV 元素(这样它就可以充当绝对定位元素的容器)。然后将图像拖放到 DIV 上会创建一个新的 Image 对象(比如拖动图像的克隆)，并根据拖放位置将其绝对定位在容器中。图像的新副本可以拥有自己的拖动处理程序以在容器中移动它，并且可以添加程序选项以根据需要删除(克隆的)放置的图像。

您还可以在开始拖动操作时计算鼠标相对于图像元素的位置。这将允许将其放在鼠标下方，与鼠标光标的相对位置与拖动操作开始时相同。这个问题关于retrieving the X Y position of an element可能有帮助。 (目前拖放的图像没有出现在光标下。)