我是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>
映入眼帘， 丹尼尔
答案 0 :(得分：0)
您需要跟踪元素。画布只是一个位图图像，不了解圆形或正方形是什么。
思路：
（1）为您制作的每个形状创建一个单独的画布，并使用透明背景覆盖它们。当重复单击或触摸画布的某个点时，循环浏览该事件下方的潜在目标元素，以某种方式突出显示它们。选择正确的元素后，定义一个事件（手势），允许用户选择要编辑的目标。停止选择功能并启动编辑功能。
（2）忘记画布，用SVG
完成所有操作答案 1 :(得分：0)
您无法在没有额外支持的情况下将绘制到画布上的图像拖动到周围 - 绘制的图像只是一组像素，它们是画布图像数据的一部分。
您可能对名为Fabric.js（tag和homepage）的画布库感兴趣。我不是＆＃34;推荐＆＃34;它本身 - 我还没有使用它 - 但你肯定可以在主页上拖动图书馆创建的画布对象。
更简单的解决方案可能是在没有画布的情况下使用JavaScript / HTML。例如，用相对DIV元素替换画布（因此它可以充当绝对定位元素的容器）。然后在DIV上放置一个图像会创建一个新的Image对象（比如拖动图像的克隆），并根据放置的位置将其绝对放置在容器中。图像的新副本可以让它自己的拖动处理程序在容器周围移动它，并且可以添加程序选项以根据需要删除（克隆的）删除的图像。
您还可以在开始拖动操作时计算鼠标相对于图像元素的位置。这将允许将鼠标放在鼠标下方与鼠标光标相同的相对位置，如同在拖动操作开始时一样。关于retrieving the X Y position of an element的这个问题可能有所帮助。 （暂停图像不会出现在光标下面。）