This is what I have tried:
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
<script type="text/javascript">
window.onload = function ()
{
var paper = new Raphael(Raphael("container", "100%", "100%"));
var line = paper.path();
var start = function (x, y) {
this.ox = this.attr("x");
this.oy = this.attr("y");
var line = paper.path("M", this.ox, this.oy);
},
move = function (dx, dy) {
this.attr({
x: this.ox + dx,
y: this.oy + dy
});
paper.path("L",x,y);
},
up = function () {
this.animate({
opacity: 0
}, 500);
};
paper.set(line).drag(move, start, up);
};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<h1 id="title">Editor</h1>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Here's the live demo: https://jsbin.com/giqufilusu/1/edit?html,output
I don't know why its not working. Is there a syntax problem or I didn't code the correct way. There are some examples on web but most of them use jquery + raphael js to draw line on mouse events but I want to draw with drag()
method of raphael. How do I fix this?