我是 Javascript 的新手，我遇到了一个我什至无法解决的任务..
我必须得到一个 HTML 5 拖放，它可以添加尽可能多的元素，如果我想编辑一个新元素或更改位置，它必须很容易。
这是现在的样子:
目前这并不能满足我的需要..
谁能帮帮我？
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(tag 和 homepage)的 Canvas 库感兴趣。我不是这样“推荐”它的——我没有使用过它——但你当然可以在主页上拖动库创建的 Canvas 对象。
一个更简单的解决方案可能是在没有 Canvas 的情况下使用 JavaScript/HTML。将 Canvas 替换为相对 DIV 元素(这样它就可以充当绝对定位元素的容器)。然后将图像拖放到 DIV 上会创建一个新的 Image 对象(比如拖动图像的克隆)，并根据拖放位置将其绝对定位在容器中。图像的新副本可以拥有自己的拖动处理程序以在容器中移动它，并且可以添加程序选项以根据需要删除(克隆的)放置的图像。
您还可以在开始拖动操作时计算鼠标相对于图像元素的位置。这将允许将其放在鼠标下方，与鼠标光标的相对位置与拖动操作开始时相同。这个问题关于retrieving the X Y position of an element可能有帮助。 (目前拖放的图像没有出现在光标下。)
关于javascript - 带坐标的 HTML5 拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48470892/