logo标签列表

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

javascriptsvg
3
我该如何创建一个SVG对象，以便当你从它拖动时，它会创建一个新的实例。
例如，如果第一个SVG对象处于固定位置，并且我试图将其拖动，它将创建一个新的SVG对象，我可以将其放置在任何我想要的位置，而第一个SVG对象仍将位于其起始位置。
谢谢 :)
你目前尝试了什么？并且通过谷歌搜索，你找到了任何相关资源吗？ - rpivovar
请在此处查看感谢：https://jsfiddle.net/stephan_dd/a0t9cbkv/2/ - Stephan D.
这些坐标只是为了方便我在 x-y 位置上进行跟踪。 - Stephan D.
你还需要克隆体可拖动吗？ - methodofaction
1
我基于你的jsfiddle (https://jsfiddle.net/atfuzLso/1/) 创建了一个解决方案。如果这符合您的期望，请告诉我，我会将其转化为答案。 - Marius
显示剩余3条评论
1个回答
2

我基于HTML拖放API创建了一个解决方案。

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

HTML

<div id="container" width="100%" height="100%">
  <div id="originalCircle" class="circle">
    <svg width='100' height='100'>
      <circle id='circleSvg' cx="50" cy="50" r="40"
              stroke="none" stroke-width="4" fill="rgb(185, 185, 185)" />
    </svg>
  </div>
</div>

JavaScript

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);
}

CSS

#container {
  position: relative;
}

.circle {
  position: absolute;
}
再次感谢，非常完美！ - Stephan D.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接