Draggable plugin

draggable.js

/**
 * Draggable module
 *
 * @link https://gist.github.com/yuanchuan/1330150
 *
 * Modified: 2015/08/12
 * @author softwarespot
 */
(function draggableModule(document, $) {
    // Plugin Logic

    $.fn.extend({
        draggable: function draggable(selector) {
            var $parent = selector;

            // Object to store the mouse co-ordinates
            var mouse = {
                update: function update(event) {
                    this.x = event.pageX;
                    this.y = event.pageY;
                },

                x: 0,
                y: 0,
            };

            // If the the selector argument is a string
            if (_isString(selector)) {
                $parent = $(selector);
            }

            // If the parent is not a valid instance of jQuery, i.e. the selector wasn't a string, but
            // neither was it a jQuery selector, then use document instead
            if (!($parent instanceof $)) {
                $parent = $(document);
            }

            return this.each(function each() {
                // Cache the jQuery selector
                var $element = $(this);

                // Create a function expression to reference at a later stage
                var mouseDown = function mouseDown(event) {
                    event.preventDefault();

                    // If not absolute, fixed or relative, then set the position to relative by default
                    if (!/^(absolute|fixed|relative)$/i.test($element.css('position'))) {
                        $element.css('position', 'relative');
                    }

                    // Update the mouse coordinates
                    mouse.update(event);

                    // Create a function expression to reference at a later stage
                    var mouseMove = function mouseMove(event) {
                        event.preventDefault();

                        // Get the offset object relative to the document
                        var offset = $element.offset();

                        // Set the offset of the element
                        $element.offset({
                            left: (offset.left + (event.pageX - mouse.x)),
                            top: (offset.top + (event.pageY - mouse.y)),
                        });

                        // Update the mouse coordinates
                        mouse.update(event);
                    };

                    // Register an event for 'MOUSE_MOVE' on the parent element
                    $parent.on(_eventsMouseMove, mouseMove);

                    // Tidy up registered events (good housekeeping)

                    // Register an event for 'MOUSE_UP' on the parent element
                    $parent.one(_eventsMouseUp, function one() {
                        // 'MOUSE_UP' will automatically be unregistered, due to using .one()

                        // Unregister the 'MOUSE_MOVE' event
                        $parent.off(_eventsMouseMove, mouseMove);
                    });
                };

                // Register an event for 'MOUSE_DOWN' on the element
                $element.on(_eventsMouseDown, mouseDown);
            });
        },
    });

    // Constants

    // When the primary mouse button is pushed down on the element
    var _eventsMouseDown = 'mousedown.jquery.draggable';

    // When the mouse is moved whilst the primary mouse button is down. This is only created when 'MOUSE_DOWN' is invoked
    var _eventsMouseMove = 'mousemove.jquery.draggable';

    // When the primary mouse button is released. This is only called once using .one()
    var _eventsMouseUp = 'mouseup.jquery.draggable';

    // Fields

    // Methods (Private)

    // Check if a value is a string datatype with a length greater than zero when whitespace is stripped
    function _isString(value) {
        return $.type(value) === 'string' && $.trim(value).length > 0;
    }

    // Defaults

    $.fn.draggable.options = {};
})(window.document, window.jQuery);

// $(function () {
// $('div').draggable();
// });