/*
$("#div").Drags({   
zIndex: 20,   
opacity: .7,   
handle: '#div_top',   
callback: {   
onMove: function(e) {   
$('#div').html('Div Position:(Left:'    
+ e.pageX + ' ,Top:' + e.pageY + ')');   
},   
onDrop: function() {   
$('#div').html('Div has been dopped');   
}   
}   
});
*/
(function($) {
    $.extend($.fn, {
        getCss: function(key) {
            var v = parseInt(this.css(key));
            if (isNaN(v))
                return false;
            return v;
        }
    });
    $.fn.Drags = function(opts) {
        var target = null;
        var dragData = {};
        var ps = $.extend({}, $.fn.Drags.defaults, opts);
        var dragndrop = {
            drag: function(e) {
                target.css({
                    left: dragData.left + e.pageX - dragData.offLeft,
                    top: dragData.top + e.pageY - dragData.offTop
                });
                dragData.onMove(e);
            },
            drop: function(e) {
                target.css({ 'opacity': dragData.oldOpacity }).css({ 'opacity': '' });
                dragData.onDrop(e);
                $().unbind('mousemove', dragndrop.drag).unbind('mouseup', dragndrop.drop);
            }
        }
        return this.each(function() {
            var me = this;
            var handle = null;
            if (typeof ps.handle == 'undefined')
                handle = $(me);
            else
                handle = (typeof ps.handle == 'string' ? $(ps.handle, this) : ps.handle);
            handle.bind('mousedown', { e: me }, function(s) {
                target = $(s.data.e);
                var oldPosition = {};
                if (target.css('position') != 'absolute') {
                    try {
                        target.position(oldPosition);
                    } catch (ex) { }
                    target.css('position', 'absolute');
                }
                dragData = {
                    left: oldPosition.left || target.getCss('left') || 0,
                    top: oldPosition.top || target.getCss('top') || 0,
                    width: target.width() || target.getCss('width'),
                    height: target.height() || target.getCss('height'),
                    offLeft: s.pageX,
                    offTop: s.pageY,
                    oldOpacity: target.getCss('opacity') || 1,
                    onMove: ps.callback.onMove,
                    onDrop: ps.callback.onDrop
                }
                target.css('opacity', ps.opacity);
                $().mousemove(dragndrop.drag).mouseup(dragndrop.drop);
            });
        });
    }
    $.fn.Drags.defaults = {
        zIndex: 20,
        opacity: .7,
        callback: {
            onMove: function() { },
            onDrop: function() { }
        }
    }
})(jQuery);