रैफेल ड्रैग और ड्रॉप कंटेनर से दूसरे कंटेनर

Question

मैं उसी पेपर के भीतर तत्व खींचने और छोड़ने में सक्षम हूं। अब मुझे एक पेपर कंटेनर से दूसरे में रैफेल तत्व खींचने और छोड़ने में सक्षम होना चाहिए।

पहले svg से दूसरे svg

html में पहले svg तत्व

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

html में दूसरा svg तत्व

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

करने के लिए ड्रैग: यहाँ उदाहरण है

सबसे पहले, क्या करना संभव है? यदि संभव हो, तो कृपया मुझे कुछ सुराग दें कि इसे कैसे करें। धन्यवाद!

Answer 1

कुछ दिनों बाद मैंने सरल जावास्क्रिप्ट और svg के साथ उपयोगकर्ता को 'ड्रैग ड्रॉप' कार्यक्षमता प्रदान की। जिसमें मैंने एक फ़ंक्शन दिया जो पैनिंग या ज़ूमिंग के बावजूद माउस पॉइंटर की सटीक स्थिति निर्धारित करता है। इसे देखें और देखें कि यह आपके लिए उपयोगी है या नहीं। (मुझे नहीं पता कि यह रैपिहेल में कैसे काम करता है)

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