帶有坐標的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位置的問題可能會有所幫助。 （目前，拖放的圖像沒有出現在光標下方。）