Raphael JS: Click is triggered at end of drag

Question

The intent of the following code is to change the circle color only when you click on it, not on mouse up after a drag/drop. For some reason Raphael is firing a click event on mouse up. How to prevent this? This is the jsfiddle

This is the HTML:

<div id="canvas"></div>

And this is the javascript:

Raphael.st.draggable = function() {
  var me = this,
  lx = 0,
  ly = 0,
  ox = 0,
  oy = 0,
  moveFnc = function(dx, dy) {
      lx = dx + ox;
      ly = dy + oy;
      me.transform('t' + lx + ',' + ly);
  },
  startFnc = function() {},
  endFnc = function() {
      ox = lx;
      oy = ly;
  };

  this.drag(moveFnc, startFnc, endFnc);
};



var paper = Raphael(document.getElementById('canvas'));
var mySet = paper.set();

var c = mySet.push(paper.circle(50, 50, 50).attr('fill', 'red'));

mySet.draggable();

c.click(function(evt) {
   this.attr({"fill": "#2e2e2e" });
});

Answer 1

This is what i'm using to drag sets:

http://jsfiddle.net/Margo/Q3EBw/5/

paper = Raphael(0, 0, 500, 500);
var ox = 0;
var oy = 0;
var screenSet = paper.set();
screenSet.push(paper.rect(0, 0, 100, 75, 0).attr({
        fill: 'red', stroke: 'none'
    }));

screenSet.push(paper.text(0 , 0 ,"Text").attr({ "text-anchor": "start" }));

    start = function() {

        ox =  this.attr("x");
        oy = this.attr("y");
        screenSet.attr({
            opacity: 1
        });
},

    move = function(dx, dy) {
        var att ={
            x: ox + dx,
            y:oy + dy
        };
        screenSet.attr(att);
    },
    up = function() {
        this.attr({
            opacity: .5
        });
        ox = 0, oy = 0;
    };
screenSet.drag(move, start, up);

Hope it helps you :)