raphaeljs drag and drop

Question

I am using rapaeljs for my web app. I want to set dropable boundries of the object. Object can move in dropable area. Once an object come in dropable area, there should be no way out for the object.

Answer 1

Raphael has built in drag and drop support through .drag(). Use it in the form element.drag(start, move, up); Where the 3 arguments are 3 function references to the functions you write that deal with the mousedown, movement, and mouseup events respectively.

Note how this.ox and this.oy is used to store the starting positions and dx and dy is used for the movement.

The following implements a drag and drop on a box. The box can always be moved, but once it's in the "jail" box, it cannot be moved back out. When the box crosses into the jail, the color is instantly changed, to signal the user that the functionality has changed.

This is implemented with a Math.min() and Math.max() adjustment of the box's position after dx and dy are added to the current position:

var nowX, nowY, move = function (dx, dy) {
    // move will be called with dx and dy
    if (this.attr("y") > 60 || this.attr("x") > 60)
        this.attr({x: this.ox + dx, y: this.oy + dy}); 
    else {
        nowX = Math.min(60, this.ox + dx);
        nowY = Math.min(60, this.oy + dy);
        nowX = Math.max(0, nowX);
        nowY = Math.max(0, nowY);            
        this.attr({x: nowX, y: nowY });
        if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
    }
}

You could also make it so that the box cannot be picked up again once it is put down in the "jail" box. This could be done with a test of position in the move() or start() function or the use of c.undrag(f) in the stop() function.

jsFiddle example

window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
    c = R.rect(200, 200, 40, 40).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    j = R.rect(0,0,100,100),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});
        if (this.attr("y") < 60 &&  this.attr("x") < 60)
            this.attr({fill: "#000"});        
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        if (this.attr("y") > 60 || this.attr("x") > 60)
            this.attr({x: this.ox + dx, y: this.oy + dy}); 
        else {
            nowX = Math.min(60, this.ox + dx);
            nowY = Math.min(60, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);            
            this.attr({x: nowX, y: nowY });
            if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
        }
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        if (this.attr("y") < 60 && this.attr("x") < 60)
            this.attr({fill: "#AEAEAE"});            
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
};​