Raphael drag an object from one container to another container

Question

I managed to drag an item inside the same paper. Now I need to be able to drag the raphael element from one paper container to another. Here is an example:

drag from the first svg to the second svg

first svg element in html

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="260"> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x="10" y="15" width="64" height="64" r="5" rx="5" ry="5" fill="#ffc0cb" stroke="#000"> </rect> </svg> 

second svg element in html

 <svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" </svg> 

First of all, can this be done? If possible, please let me know how to do this. thanks!

Answer 1

After a couple of days, I provided the user with a drag and drop function, with simple javascript and svg. in which I gave a function that determines the exact position of the mouse pointer regardless of panning or zooming. take a look at it and see if it is useful to you or not. (I do not know how this works in rachel)

  var mainsvg = document.getElementsByTagName('svg')[0]; function mouseup(event) { var svgXY = getSvgCordinates(event);// get current x,y wrt to your svg. } function getSvgCordinates(event) { var m = mainsvg.getScreenCTM(); var p = mainsvg.createSVGPoint(); var x, y; x = event.pageX; y = event.pageY; px = x; py = y; p = p.matrixTransform(m.inverse()); x = px; y = py; x = parseFloat(x.toFixed(3)); y = parseFloat(y.toFixed(3)); return {x: x, y: y}; }