Question

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

我必须得到一个HTML 5拖放，它可以根据需要添加元素，如果我想编辑其中一个新元素或更改位置，它必须很容易。

这就是现在的样子：

目前我不需要这样做..

谁能帮助我？

＆＃13;

			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 + ")";
			}

＆＃13;

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;
		
	}

＆＃13;

		<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>

＆＃13;

映入眼帘，丹尼尔

Answer 1

您需要跟踪元素。画布只是一个位图图像，不了解圆形或正方形是什么。

思路：

（1）为您制作的每个形状创建一个单独的画布，并使用透明背景覆盖它们。当重复单击或触摸画布的某个点时，循环浏览该事件下方的潜在目标元素，以某种方式突出显示它们。选择正确的元素后，定义一个事件（手势），允许用户选择要编辑的目标。停止选择功能并启动编辑功能。

（2）忘记画布，用SVG

完成所有操作

Answer 2

您无法在没有额外支持的情况下将绘制到画布上的图像拖动到周围 - 绘制的图像只是一组像素，它们是画布图像数据的一部分。

您可能对名为Fabric.js（tag和homepage）的画布库感兴趣。我不是＆＃34;推荐＆＃34;它本身 - 我还没有使用它 - 但你肯定可以在主页上拖动图书馆创建的画布对象。

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

您还可以在开始拖动操作时计算鼠标相对于图像元素的位置。这将允许将鼠标放在鼠标下方与鼠标光标相同的相对位置，如同在拖动操作开始时一样。关于retrieving the X Y position of an element的这个问题可能有所帮助。（暂停图像不会出现在光标下面。）

HTML5使用坐标拖放

2 个答案: