javascript - 带坐标的 HTML5 拖放

原文 标签 javascript jquery css html drag-and-drop

我是 Javascript 新手,我有一个我什至无法解决的任务..

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

这就是它现在的样子:

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>


问候,
丹尼尔

最佳答案

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

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

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

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

关于javascript - 带坐标的 HTML5 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48470892/

相关文章:

php - PHP + JavaScript自动在新窗口(标签)中打开链接

jquery - jQuery隐藏并爆炸导致错误位置

javascript - 如何模拟点击页面加载?

html - 单个响应图像上的多个响应图像?

javascript - 告诉 jquery mobile/phonegap app 等到内容加载完毕

css - 如何在标题中垂直居中放置背景图像

javascript - 使用JavaScript对资源文件中的单引号进行编码以进行自定义操作

javascript - 我可以在 Javascript/Typescript 的函数中以编程方式调用另一个同名的函数吗?

javascript - 使用CSS安排具有动态内容的多个div

jquery - 使用jQuery平滑滚动到其他页面上的特定div