RaphaelJS drag-and-drop on steroids

A bunch of core extensions to Raphael, and two key extensions el.draggable() and st.draggable() that allows you to do drag-and-drop very quickly.

by Achim Sperling

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="DEBUG">Drag the small box or circle</div>

<div id="SVG_DND_HOLDER_1"></div>

CSS

html, body
{
    border: 0;
    margin: 0;
    padding: 5px;
    font-family: Tahoma;
    font-size: 9pt;
}

#DEBUG
{
    height: 60px;
    width: 350px;
}

#SVG_DND_HOLDER_1
{
    background-color: #eee;
    border: 1px solid #bbb;
    
    width: 500px;
    height: 260px;
    
    margin: 0px;
    padding: 0px;
}

JavaScript

/**
 * @blog       
 * http://terryyoung.blogspot.com/2011/08/raphaeljs-drag-and-drop-on-steroids.html
 */


///////////////////////////////////////////////////////////////////////////////
// Scroll to the bottom to see the simple demo code.
//
// These below are a bunch of my extensions to Raphael 
// that enables the final, simply usage



/**
 * Too many times I've seen or written stuff like this that drives me mad:
 *
 * this.ox = this.type == 'rect' ? this.attr('x') : this.attr('cx');
 * this.oy = this.type == 'rect' ? this.attr('y') : this.attr('cy');
 *
 * {...10,000 words of rant skipped here...}
 *
 * The last one simplifies it to:
 * this.o();    // and better, it supports chaining
 *
 * @copyright   Terry Young <terryyounghk [at] gmail.com>
 * @license     WTFPL Version 2 ( http://en.wikipedia.org/wiki/WTFPL )
 */
Raphael.el.is = function (type) { return this.type == (''+type).toLowerCase(); };
Raphael.el.x = function () { return this.is('circle') ? this.attr('cx') : this.attr('x'); };
Raphael.el.y = function () { return this.is('circle') ? this.attr('cy') : this.attr('y'); };
Raphael.el.o = function () { this.ox = this.x(); this.oy = this.y(); return this; };


/**
 * Another one of my core extensions.
 * Raphael has getBBox(), I guess the "B" stands for Basic,
 * because I'd say the "A" in getABox() here stands for Advanced.
 *
 * It's just to free myself from calculating the same stuff over and over and over again.
 * {...10,000 words of rant skipped here...}
 *
 * @author      Terry Young <terryyounghk [at] gmail.com>
 * @license     WTFPL Version 2 ( http://en.wikipedia.org/wiki/WTFPL )
 */
Raphael.el.getABox = function ()
{
    var b = this.getBBox(); // thanks, I'll take it from here...

    var o =
    {
        // we'd still return what the original getBBox() provides us with
        x:              b.x,
        y:              b.y,
        width:          b.width,
        height:         b.height,

        // now we can actually pre-calculate...