Move Dynamically Created SVG With Mouse

I'm pretty new to HTML and JS, but I'm trying to learn some of the basics. Now I'm experimenting with graphics. I'm trying to create two svg elements dynamically with JS and then

Solution 1:

A few observations: your code is correct, however it's extremely verbose so I needed to reduce it. In the code you'll find a function to create an SVG element from an object. I'm using this function to create the svg elements and the circles.

Also I'm putting the SVG elements in an array. It's easier to wotk with similar elements when you have them in an array.

The main idea is:

1. The svg elements have position:absolute. The position of the svg can be set using the top and left properties in css

2. On mouse down drag is true. If drag is true you can drag the svg element. The new position of the svg (it's top and left properties) are set in css in function of the mouse position and the distance delta between the mouse and the top left corner of the SVG element.

3. On mouse up drag is false. The svg element can't be dragged any longer.

Please read the code and the comments and let me know if you don't understand.

const SVG_NS = "http://www.w3.org/2000/svg";
let svg1 = {
  width: 100,
  height: 100
};

let circle1 = {
  cx: 80,
  cy: 80,
  r: 30,
  fill: "red"
};

let drag = null;// a flag to know if you can drag or not
let _array = [];// the array of scg elements
let delta = {};// distance between the mouse and the top left coener of the SVG element
let m = {};// mouse position

function createSVGElement(o, elmtName, parent) {
  var elmt = document.createElementNS(SVG_NS, elmtName);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

let firstsvg = createSVGElement(svg1, "svg", svg54583);
let firstCircle = createSVGElement(circle1, "circle", firstsvg);

let secondsvg = createSVGElement(svg1, "svg", svg54583);
let secondCircle = createSVGElement(circle1, "circle", secondsvg);

_array.push(firstsvg);
_array.push(secondsvg);



_array.forEach((svg, i) => {
  svg.addEventListener("mousedown", evt => {
    // you can drag
    drag = i + 1; // i + 1 because 0 is false. I need it to be true
    let pos = svg.getBoundingClientRect();
    // distance between the mouse and the top left coener of the SVG
    delta.x = evt.clientX - pos.x;
    delta.y = evt.clientY - pos.y;
  });
});

svg54583.addEventListener("mousemove", evt => {
  if (drag) {
    m = oMousePos(svg54583, evt); //console.log("m",m);
    _array[drag - 1].style.left = m.x - delta.x + "px";
    _array[drag - 1].style.top = m.y - delta.y + "px";
  }
});

svg54583.addEventListener("mouseup", evt => {
  drag = null;
});

function oMousePos(elmt, evt) {
  var ClientRect = elmt.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

*{margin:0;padding:0;}
svg{border:1px solid; position:absolute;background:white;}

svg:nth-of-type(2){left:200px;}

#svg54583{width:100vw; height:100vh; background:lightGrey; border:1px solid;}

<div id="svg54583"></div>