Drag a svg element and save new positions

[lurtnowski]

I have a page where im trying to perform a drag/drop function on a rect

Draggable SVG elements

Problem is, when I’m done dragging and a javascript function is run to save a few variables and submit a form

        function endDrag(evt) {
          selectedElement = false;
  
            var coord = getMousePosition(evt);
		  //console.log("x: "+ Math.floor(coord.x - offset.x));
		  //console.log("y: "+ Math.floor(coord.y - offset.y));
		  document.getElementById("x_coord").value = Math.floor(coord.x - offset.x);
		  document.getElementById("y_coord").value = Math.floor(coord.y - offset.y);
		  document.getElementById("height").value = document.getElementById('moving_device').getAttribute("height");
		  document.getElementById("to_rack_slots").value = 45;
		  document.getElementById("New_Position").submit(); 
	
  }

The resulting page (after I drag the element onto the other rack)

but if I try again

the element was dragged to just about the same position, so why are the coordinates so different?
I dont knoww why the y_coord is negative.

[droopsnoot]

(I’ve moved this to the Javascript section as, on first glance, I can’t see any PHP content).

[m_hutley]

Well for starters, i would discourage the use of free-dragging, as it will only lead to misery when you try to add collision detection.

We’re kind of reinventing the D3 wheel here, but lets put some things in perspective.

@lurtnowski

the element was dragged to just about the same position, so why are the coordinates so different?

Is your window in the exact same place? What defines getMousePosition?
Why are we using the mouse position at all? Why do we not reference the element’s position, which should have an absolute measurement relative to its container? (If I grab the element on the right side, I’ll get a different position than if I grab it on the left…)

[lurtnowski]

k, thinking im making some headway.
Now, when I drag a device I get

If I try again (drag it to about the same spot, I get

(the x/y coordinates are similar)
But now I’m trying to create a bounding box so the dragged device cant shoot off the page or dissapear (I tried to follow peters instructions, but am getting

I clicked on the error it seems to not like this part

Is there something wrong with dx or dy?

[m_hutley]

the error message is telling you that transform is undefined. The reason for that is that transform is undefined.

[lurtnowski]

ok, redid the svg with the drag function working and everything looks good until the form is submitted.
first time,

another time

The x and y coordinates are way off (These should be the same since the element was dragged to the same spot. It must be using the x/y coordinate system of the mouse on the page rather than the mouses position on the SVG.
I believe its set here

function getMousePosition(evt) {
  var CTM = svg.getScreenCTM();
  if (evt.touches) { evt = evt.touches[0]; }
  return {
    x: (evt.clientX - CTM.e) / CTM.a,
    y: (evt.clientY - CTM.f) / CTM.d
  };
}

Is that what is screwing me up?