让 Raphael 的 拖拽

一、简易版

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.attr({
                            x: this.attrs.x + deltaX,
                            y: this.attrs.y + 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.transform("T" + deltaX + "," + deltaY + "...");
 that.attr({
                            x: that.attrs.x + deltaX,
                            y: that.attrs.y + 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);

使用：

var R = Raphael("paper", 400, 300);
R.rect(0, 0, 400, 300);
  
var p = R.path('M0 0L100 0L50 80Z');
  
p.attr({"fill":"green", 'opacity':0.5});
p.draggable();