Raphaël JS Demo - Interaction

by craic

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<div id="paper"></div>

CSS

#paper {
    background-color: #f0f0f0; 
    width: 400px;
    height: 400px;
}

JavaScript

var start = function() {
    // storing original coordinates
    this.ox = this.attr("x");
    this.oy = this.attr("y");
//    this.attr({
//        opacity: 0.5
//    }); // or make it disappear?
//    this.toFront();
    },
    move = function(dx, dy) {
        // move will be called with dx and dy -- image uses x and y
        this.attr({
            x: this.ox + dx,
            y: this.oy + dy
        });

    },
    up = function() {
        // restoring state
//        this.attr({
//            opacity: 1.0
//        });
    };


// Interactions using Raphael events, instead of JQuery
var paper = Raphael("paper", 400, 400);

// circle(x_center, y_center, radius)
var circles = [];
circles[0] = paper.circle(75, 75, 50).attr('fill', '#80f');
circles[1] = paper.circle(200, 75, 50).attr('fill', '#80f');
circles[2] = paper.circle(325, 75, 50).attr('fill', '#80f');

for(var i = 0; i < circles.length; i++) {
    circles[i].drag(move, start, up);
}