<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> test </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script>
Raphael(function ()
{
var R = Raphael("paper", 800, 1000);
var rect = R.rect(0, 0, 400, 300).attr({"fill":"green", 'opacity':0.5});
var p = R.path('M0 0L100 0L50 80Z');
p.attr({"fill":"green", 'opacity':0.5});
rect.draggable();
p.draggable();
/*
var R = Raphael("paper", 400, 300);
var p = R.path('M0 0L100 0L50 80Z');
p.attr({"fill":"green", 'opacity':0.8});
var start = function (x, y) {
this.attr({opacity: 1});
this.lastX = x;
this.lastY = y;
},
move = function (dx, dy, x, y) {
var deltaX = x - this.lastX;
var deltaY = y - this.lastY;
this.translate(deltaX, deltaY);
this.lastX = x;
this.lastY = y;
},
up = function () {
this.attr({opacity: 0.8});
};
p.drag(move, start, up);
*/
});
(function(R) {
R.el.draggable = function(move, start, up) {
this._ui = this._ui || {};
var that = this;
this._ui.onMove = R.is(move, 'function') ?
move : function(distanceX, distanceY, x, y, deltaX, deltaY) {
that.translate(deltaX, deltaY);
};
this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
};
function onMove(distanceX, distanceY, x, y) {
var deltaX = x - that._ui.lastX;
var deltaY = y - that._ui.lastY;
that._ui.lastX = x;
that._ui.lastY = y;
that._ui.onMove(distanceX, distanceY, x, y, deltaX, deltaY);
that.paper.safari();
};
function onStart(x, y) {
that._ui.lastX = x;
that._ui.lastY = y;
that._ui.onStart(x, y);
};
return this.drag(onMove, onStart, up);
};
})(Raphael);
</script>
</head>
<body>
<div id="paper"></div>
</body>
</html>
<html>
<head>
<title> test </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script>
Raphael(function ()
{
var R = Raphael("paper", 800, 1000);
var rect = R.rect(0, 0, 400, 300).attr({"fill":"green", 'opacity':0.5});
var p = R.path('M0 0L100 0L50 80Z');
p.attr({"fill":"green", 'opacity':0.5});
rect.draggable();
p.draggable();
/*
var R = Raphael("paper", 400, 300);
var p = R.path('M0 0L100 0L50 80Z');
p.attr({"fill":"green", 'opacity':0.8});
var start = function (x, y) {
this.attr({opacity: 1});
this.lastX = x;
this.lastY = y;
},
move = function (dx, dy, x, y) {
var deltaX = x - this.lastX;
var deltaY = y - this.lastY;
this.translate(deltaX, deltaY);
this.lastX = x;
this.lastY = y;
},
up = function () {
this.attr({opacity: 0.8});
};
p.drag(move, start, up);
*/
});
(function(R) {
R.el.draggable = function(move, start, up) {
this._ui = this._ui || {};
var that = this;
this._ui.onMove = R.is(move, 'function') ?
move : function(distanceX, distanceY, x, y, deltaX, deltaY) {
that.translate(deltaX, deltaY);
};
this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
};
function onMove(distanceX, distanceY, x, y) {
var deltaX = x - that._ui.lastX;
var deltaY = y - that._ui.lastY;
that._ui.lastX = x;
that._ui.lastY = y;
that._ui.onMove(distanceX, distanceY, x, y, deltaX, deltaY);
that.paper.safari();
};
function onStart(x, y) {
that._ui.lastX = x;
that._ui.lastY = y;
that._ui.onStart(x, y);
};
return this.drag(onMove, onStart, up);
};
})(Raphael);
</script>
</head>
<body>
<div id="paper"></div>
</body>
</html>