How do you make an element undragable in Raphael?

Question

I made an element dragable using element.drag(start, move, up);

When I want to make the element undragable, I can somewhat achieve this using the method from the documentation:

element.undrag(f); // Any undefined variable works as the argument

This makes it so that the element cannot be moved anymore.

This method has 2 problems:

1. This makes all elements on the page undragable.
2. start() still fires once for each element. I have an opacity change triggered in start() so it's quite obvious.

How do I make an element undragable so that only that element is affected and start() is not fired?

Here's what I have so far. The following tries to make the element undragable after one drag:

wiwindow.onload = function() {
    var R = Raphael("canvas", 500, 500),
    c = R.circle(100, 100, 50).attr({
        fill: "hsb(.8, 1, 1)",
        stroke: "none",
        opacity: .5
    }),
    d = R.circle(200, 200, 50).attr({
        fill: "hsb(1, 1, .8)",
        stroke: "none",
        opacity: .5
    }),        
    start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
        this.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.undrag(notDefinedVariable); // Try to make it undragable
    };

    c.drag(move, start, up);    
    d.drag(move, start, up);     
};​

Try it out with this jsFiddle

Answer 1

This is known bug. Will be fixed in the next release.