jQuery UI: Draggable

Draggable Elements

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

CSS

/*
    Add custom styling or use existing jQuery UI themes

    REFERENCE: jQuery UI themes, http://blog.jqueryui.com/
*/

JavaScript

var oldMouseStart = $.ui.draggable.prototype._mouseStart;
$.ui.draggable.prototype._mouseStart = function (event, overrideHandle, noActivation) {
    this._trigger("beforeStart", event, this._uiHash());
    oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
};

$("#draggable").draggable({
    beforeStart: function () {
        console.log('beforeStart::');
    }
});