带有坐标的HTML5拖放

Question

我是Java语言的新手，我有一个任务甚至无法解决。

我必须要有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

您需要跟踪元素。 画布只是位图图像，无法理解圆形或正方形。

想法：

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

（2）忘掉画布，用SVG完成所有操作

Answer 2

您不能在没有其他支持的情况下将绘制的图像拖到画布上-绘制的图像只是画布图像数据一部分的一组像素。

您可能对一个名为Fabric.js的画布库（ tag和homepage ）感兴趣。 我不是这样“推荐”的-我没有使用过-但是您当然可以在主页上拖动库创建的画布对象。

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

开始拖动操作时，您还可以计算鼠标相对于图像元素的位置。 这样可以将其放到鼠标下方与拖动操作开始时相同的相对位置。 有关检索元素的XY位置的问题可能会有所帮助。 （目前，拖放的图像没有出现在光标下方。）