raphael trascina e rilascia oggetto da un contenitore ad un altro contenitore

Question

Sono stato in grado di trascinare e rilasciare elementi all'interno della stessa carta. Ora devo essere in grado di trascinare e rilasciare l'elemento raphael da un contenitore di carta a un altro. Ecco l'esempio:

trascinate dal primo SVG alla seconda SVG

primo elemento SVG 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>

secondo elemento SVG in html

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

Prima di tutto, è possibile fare? Se possibile, per favore dammi qualche indizio su come farlo. Grazie!

Answer 1

un paio di giorni dopo ho fornito una funzionalità di "trascinamento" a un utente, con javascript semplice e svg. in cui ho dato una funzione che determina la posizione esatta del puntatore del mouse indipendentemente dal panning o dallo zoom. dai un'occhiata e vedi se è utile per te o no. (non so come funziona in rapheal)

var mainsvg = document.getElementsByTagName('svg')[0]; 
function mouseup(event) { 
    var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your svg. 
} 
    function getSvgCordinates(event) { 
       var m = mainsvg.getScreenCTM(); 
       var p = mainsvg.createSVGPoint(); 
       var x, y; 

       x = event.pageX; 
       y = event.pageY; 

       p.x = x; 
       p.y = y; 
       p = p.matrixTransform(m.inverse()); 

       x = p.x; 
       y = p.y; 

       x = parseFloat(x.toFixed(3)); 
       y = parseFloat(y.toFixed(3)); 

       return {x: x, y: y}; 
      }