Question

如何创建一个SVG对象，当您从该对象中拖动时，将创建一个自我的新实例。

就像第一个SVG对象位于固定位置并尝试拖动它一样，它会创建一个新的SVG对象，我可以放置在任何我想要的位置，而第一个SVG对象仍然位于其起始位置。 / p>

谢谢：）

Answer 1

我已经基于HTML Drag and Drop API创建了一个解决方案。

JSFiddle：https://jsfiddle.net/atfuzLso/145/

<强> HTML

var originalCircle = document.getElementById('originalCircle');
originalCircle.onmousedown = addCircle;

function addCircle(e) {
  var newCircle = originalCircle.cloneNode(true);
  newCircle.setAttribute("draggable", "true");
  newCircle.ondragstart = e => e.dataTransfer.setData('text/plain',null);

  var circleSvg = newCircle.querySelector('#circleSvg');
  circleSvg.setAttribute("fill", randomColor());

  var container = document.getElementById('container');
  container.appendChild(newCircle);
}

var draggedElmnt;
document.ondrag = e => {};

document.ondragstart = e => {
  draggedElmnt = e.target;
  draggedElmnt.offsetX = e.offsetX;
  draggedElmnt.offsetY = e.offsetY;
  draggedElmnt.style.opacity = 0.5;
}

document.ondragend = e => draggedElmnt.style.opacity = "";

document.ondrop = e => {
  e.preventDefault();
  draggedElmnt.style.opacity = "";
  draggedElmnt.style.left = (e.clientX - draggedElmnt.offsetX) + "px";
  draggedElmnt.style.top = (e.clientY - draggedElmnt.offsetY) + "px";
}

document.ondragover = e => e.preventDefault(); // allow drop

function randomColor() {
  return "#"+((1<<24)*Math.random()|0).toString(16);
}

<强>的JavaScript

#container {
  position: relative;
}

.circle {
  position: absolute;
}

<强> CSS

	.gallery{
		margin-left:auto;
		margin-right:auto;
		max-width:600px;
	}
	IMG      {width:100%; max-width:500px;}
	IMG:hover{width:110%; max-width:550px;}

在JS中拖动并创建一个新对象

1 个答案: