jQuery plugin to make elements draggable without jQuery UI. Usage: view source on http://jqueryui.com/draggable/

jquery.draggable.js

/*--------------------------------------------------------------
Draggable
alternative to jQuery UI’s draggable
based on comments from: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
usage example: $('.post-thumbnail, article header').draggable();
--------------------------------------------------------------*/
(function($) {
	if (!jQuery().draggable) {
		$.fn.draggable = function() {
			this
				.css('cursor', 'move')
				.on('mousedown touchstart', function(e) {
					var $dragged = $(this);

					var x = $dragged.offset().left - e.pageX,
						y = $dragged.offset().top - e.pageY,
						z = $dragged.css('z-index');

					if (!$.fn.draggable.stack) {
						$.fn.draggable.stack = 999;
					}
					stack = $.fn.draggable.stack;
					
					$(window)
						.on('mousemove.draggable touchmove.draggable', function(e) {
							$dragged
								.css({'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s', 'bottom': 'auto', 'right': 'auto'})
								.offset({
									left: x + e.pageX,
									top: y + e.pageY
								})
								.find('a').one('click.draggable', function(e) {
									e.preventDefault();
								});

							e.preventDefault();
						})
						.one('mouseup touchend touchcancel', function() {
							$(this).off('mousemove.draggable touchmove.draggable click.draggable');
							$dragged.css({'z-index': stack, 'transform': 'scale(1)'})
							$.fn.draggable.stack++;
						});

					e.preventDefault();
				});
			return this;
		};
	}
})(jQuery);

how can I disable draggable.. i mean i want to enable it on click. and in the next click it should get disabled.

Nice, thanks.

@APourhadi

(function($) {
    if (!jQuery().draggable) {
        $.fn.draggable = function() {
            this
                .css('cursor', 'move')
                .on('mousedown touchstart', function(e) {
                    var $dragged = $(this).parent();
                    var x = $dragged.offset().left - e.pageX,
                        y = $dragged.offset().top - e.pageY,
                        z = $dragged.css('z-index');

                    if (!$.fn.draggable.stack) {
                        $.fn.draggable.stack = 999;
                    }
                    stack = $.fn.draggable.stack;

                    $(window)
                        .on('mousemove.draggable touchmove.draggable', function(e) {
                            $dragged
                                .css({'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s', 'bottom': 'auto', 'right': 'auto'})
                                .offset({
                                    left: x + e.pageX,
                                    top: y + e.pageY
                                })
                                .find('a').one('click.draggable', function(e) {
                                    e.preventDefault();
                                });

                            e.preventDefault();
                        })
                        .one('mouseup touchend touchcancel', function() {
                            $(this).off('mousemove.draggable touchmove.draggable click.draggable');
                            $dragged.css({'z-index': stack, 'transform': 'scale(1)'})
                            $.fn.draggable.stack++;
                        });

                    e.preventDefault();
                });
            return this;
        };
    }
})(jQuery);

Target the header, and if the parent element is the entire div, then it will drag the entire div, but only drag if dragged from the header :P (wait, is this even English? Hopefully it can be understood XD)

You are creating a global variable named stack.
You save the original z-index, but never use it.
I tested it on my phone and touchmove doesn't work, probably because the touch event doesn't have pageX and pageY in the same place as mouse events.
By the way, the transform is obnoxious for a drag effect.