raphael przeciągnij i upuść obiekt z jednego kontenera do innego kontenera

Question

Udało mi się przeciągnąć i upuścić element w obrębie tego samego papieru. Teraz muszę móc przeciągać i upuszczać element Rafaela z jednego papierowego pojemnika do drugiego. Oto przykład:

przeciągania z pierwszego SVG do drugiego SVG

pierwszy element SVG 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>

drugi element SVG html

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

Po pierwsze, czy można to zrobić? Jeśli to możliwe, daj mi znać, jak to zrobić. dzięki!

Answer 1

Kilka dni później dostarczyłem użytkownikowi funkcję "przeciągnij upuść", korzystając z prostych javascript i svg. w którym dałem funkcję, która określa dokładną pozycję wskaźnika myszy, niezależnie od przesuwania i powiększania. spójrz na to i zobacz, czy jest dla ciebie przydatne, czy nie. (nie wiem jak to działa w przypadku rapheala)

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