在图像上拖动椭圆

Question

下午好我试图找到一种方法，允许椭圆(点)移动在图像区域仅(画布)，并找到一种方法来检索坐标存储在数据库中，以便检索它以后，并能够重新绘制椭圆而不被拖拽。

现在，我有一个矩形而不是一个点，矩形不限于图像区域，我不知道如何检索它的坐标来存储它使用asp.net core MVC。谢谢你。

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}

#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}

<p>Click and hold the mouse button down while moving the Ellipse element</p>
<svg viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<image stroke="null" xlink:href="https://www.pngkey.com/png/full/8-80588_car-cartoon-png-group-picture-pollution-voiture-png.png" id="svg_1" height="400" width="400" y="0" x="0"/>
</g>
<div id="mydiv">
<div id="mydivheader">
<g data-id="00000000-0000-0000-0000-000000000000" class="draggable">
<ellipse class="0" cx="3" cy="3" rx="3" ry="3" style=""></ellipse>
</g>
</div>
</div>
</svg>

Answer 1

为什么不使用内置的HTML拖放API?在你的标记中，你混合了HTML和SVG——这就是为什么椭圆没有出现的原因。逻辑很好，但我认为使用拖放是有意义的。

如果需要用SVG替换汽车图像，请不要将椭圆与SVG混淆。

div#drop的样式具有position:relative属性。这是故意的-如果你将div#drop移动到文档中的其他位置，这很重要。

更新我改变了计算相对位置(relX,relY)的方式。它现在使用Element.getBoundingClientRect()。我还用e.offsetX/Y代替了e.layerX/Y。

//Make the DIV element draggagle:
var mydiv = document.getElementById("mydiv");
var drop = document.getElementById("drop");
mydiv.addEventListener('dragstart', e => {
let data = JSON.stringify({
id: e.target.id,
x: e.offsetX,
y: e.offsetY
});
e.dataTransfer.setData("text/plain", data);
});
drop.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});
drop.addEventListener('drop', e => {
e.preventDefault();
let data = JSON.parse(e.dataTransfer.getData("text/plain"));
let mydiv = document.getElementById(data.id);
let dropRect = drop.getBoundingClientRect();
let relX = e.clientX - data.x - dropRect.x;
let relY = e.clientY - data.y - dropRect.y;
console.log('relative pos:', `${relX},${relY}`);
mydiv.style.left = `${relX}px`;
mydiv.style.top = `${relY}px`;
});

body {
/* Padding added just to show that
*  using getBoundingClientRect() is working.
*/

padding: 10px 0 0 20px;
}
#drop {
position: relative;
}
#mydiv {
position: absolute;
z-index: 9;
text-align: center;
cursor: move;
left: 0;
top: 0;
}
#mydiv ellipse {
fill: green;
}

<p>Click and hold the mouse button down while moving the Ellipse element</p>
<div id="drop">
<img src="https://www.pngkey.com/png/full/8-80588_car-cartoon-png-group-picture-pollution-voiture-png.png" width="400" />
<div id="mydiv" draggable="true">
<svg viewBox="0 0 6 6" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<g data-id="00000000-0000-0000-0000-000000000000" class="draggable">
<ellipse cx="3" cy="3" rx="3" ry="3" />
</g>
</svg>
</div>
</div>

更新OP询问是否可以使用表单输入更新椭圆的位置。在下面的示例中，我添加了一个用于更新值的表单。当椭圆移动时，表单的值也会更新。

//Make the DIV element draggagle:
var mydiv = document.getElementById("mydiv");
var drop = document.getElementById("drop");
mydiv.addEventListener('dragstart', e => {
let data = JSON.stringify({
id: e.target.id,
x: e.offsetX,
y: e.offsetY
});
e.dataTransfer.setData("text/plain", data);
});
drop.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});
drop.addEventListener('drop', e => {
e.preventDefault();
let data = JSON.parse(e.dataTransfer.getData("text/plain"));
let mydiv = document.getElementById(data.id);
let dropRect = drop.getBoundingClientRect();
let relX = e.clientX - data.x - dropRect.x;
let relY = e.clientY - data.y - dropRect.y;
// update the form values
let form = document.forms.form01;
form.x.value = relX;
form.y.value = relY;
// update the position of the ellipse
mydiv.style.left = `${relX}px`;
mydiv.style.top = `${relY}px`;
});
document.forms.form01.addEventListener('change', e => {
let form = e.target.form;
let x = parseInt(form.x.value);
let y = parseInt(form.y.value);
// update the position of the ellipse
mydiv.style.left = `${x}px`;
mydiv.style.top = `${y}px`;
});

body {
/* Padding added just to show that
*  using getBoundingClientRect() is working.
*/

padding: 10px 0 0 20px;
}
#drop {
position: relative;
}
#mydiv {
position: absolute;
z-index: 9;
text-align: center;
cursor: move;
left: 0;
top: 0;
}
#mydiv ellipse {
fill: green;
}

<p>Click and hold the mouse button down while moving the Ellipse element OR input X anf Y values in the form (and hit enter):</p>
<form name="form01">
<label>X: <input name="x" type="text"/></label>
<label>Y: <input name="y" type="text"/></label>
</form>
<div id="drop">
<img src="https://www.pngkey.com/png/full/8-80588_car-cartoon-png-group-picture-pollution-voiture-png.png" width="400" />
<div id="mydiv" draggable="true">
<svg viewBox="0 0 6 6" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<g data-id="00000000-0000-0000-0000-000000000000" class="draggable">
<ellipse cx="3" cy="3" rx="3" ry="3" />
</g>
</svg>
</div>
</div>