Bug in dragMove of RaphaelJS 2.1.2
dragMove in RaphaelJS 2.1.2 increments x,y coordinates by scrollX/scrollY for each subsequent call to Element.drag()
by Terry Young
HTML
<div id="debug"></div>
<div id="paper"></div>
<div id="desc">
Scroll down/right, then drag box to illustrate the issue.
</div>
CSS
html, body {
border:0;
margin:0;
padding:0;
font-family: Consolas;
font-size: 9pt;
}
#paper {
width: 3000px;
height: 3000px;
border: 1px solid red;
}
#debug {
position: fixed;
text-align: right;
top: 5px;
right: 5px;
}
#desc {
position: fixed;
text-align: left;
bottom: 5px;
left: 5px;
}
JavaScript
(function (R, undefined) {
var paper = R('paper', 3000, 3000),
d = document.getElementById('debug'),
rect = paper.add([
{
'type': 'rect',
'x': 50,
'y': 50,
'width': 100,
'height': 100,
'fill': '#fc0'
}
]),
o = {},
start = function (mx, my, ev) {
o.x = this.attr('x');
o.y = this.attr('y');
},
move = function (dx, dy, mx, my, ev) {
this.attr({
x: o.x + dx,
y: o.y + dy
});
},
end = function () {};
// First call to .drag()
rect.drag(move, start, end);
// --------------------------------------------------
var debugStart = function () {},
debugMove = function (dx, dy, mx, my, ev) {
d.innerHTML = 'Drag Move<br />' +
['dx: ', dx, ', dy: ', dy, '<br>'].join('') +
['mx: ', mx, ', my: ', my, '<br>'].join('');
},
debugEnd = function () {};
// Subsequent call(s) to .drag()
// results in incorrect mx and my,
// due to bug in dragMove in RaphealJS 2.1.2:
// i.e. dragMove keeps incrementing xy coordinates by scrollX/scrollY
rect.drag(debugMove, debugStart, debugEnd);
})(Raphael);