Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 Canvas and select / drag-and-drop features in a JS library?
If you want to use HTML5 canvas to draw shapes, texts and curves and also want to attach traditional DOM events like onClick or drag and drop functions, a crossbar framework Raphael is used for doing drag and drop or touch events.
This technology uses SVG and XML for older versions of IE. Drag and drag using HTML is shown below.
Example
<!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 = "http://raphaeljs.com/">Raphaël</a>— JavaScript Vector Library</p>
</body>
</html>
Updated on: 04-Mar-2020
480 Views
Advertisements