यदि आप HTML5 कैनवास का उपयोग आकृतियाँ, टेक्स्ट और कर्व्स ड्रॉ करने के लिए करना चाहते हैं और साथ ही पारंपरिक DOM इवेंट्स जैसे onClick या ड्रैग एंड ड्रॉप फ़ंक्शन अटैच करना चाहते हैं, तो ड्रैग एंड ड्रॉप या टच इवेंट करने के लिए एक क्रॉसबार फ्रेमवर्क Raphael का उपयोग किया जाता है।
यह तकनीक पुराने IE संस्करणों के लिए SVG और XML का उपयोग करती है। HTML का उपयोग करके ड्रैग एंड ड्रॉप नीचे दिखाया गया है।
उदाहरण
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>Raphaël · Drag-n-drop</title> <link rel = "stylesheet" href = "demo.css" type = "text/css" media = "screen"> <meta name = "apple-mobile-web-app-capable" content = "yes"> <link rel = "apple-touch-icon-precomposed" href = "/Raphael.png"> <link rel = "stylesheet" href = "demo-print.css" type = "text/css" media = "print"> <script src = "raphael.js"></script> <script> window.onload = function () { var R = Raphael(0, 0, "100%", "100%"), r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}), g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}), b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "none", opacity: .5}), p = R.circle(430, 100, 50).attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5}); var start = function () { this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.animate({r: 70, opacity: .25}, 500, ">"); }, move = function (dx, dy) { this.attr({cx: this.ox + dx, cy: this.oy + dy}); }, up = function () { this.animate({r: 50, opacity: .5}, 500, ">"); }; R.set(r, g, b, p).drag(move, start, up); }; </script> </head> <body> <div id = "holder"></div> <p id = "copy">Demo of <a href = "https://raphaeljs.com/">Raphaël</a>— JavaScript Vector Library</p> </body> </html>
