Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery plugin to make elements draggable without jQuery UI. Usage: view source on http://jqueryui.com/draggable/
/*--------------------------------------------------------------
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);
@APourhadi

This comment has been minimized.

Show comment
Hide comment
@APourhadi

APourhadi May 20, 2014

nice code, thnx alot for share it. one question:
often, u have a container div and many child div inside it, something like 'header','main', 'footer' and ...
is there a way to drag whole them (container and it's child) when drag one of them such as 'header' div ?

nice code, thnx alot for share it. one question:
often, u have a container div and many child div inside it, something like 'header','main', 'footer' and ...
is there a way to drag whole them (container and it's child) when drag one of them such as 'header' div ?

@Arty2

This comment has been minimized.

Show comment
Hide comment
@Arty2

Arty2 Jun 22, 2014

Not with this particular code I'm afraid, but it can be done.

Owner

Arty2 commented Jun 22, 2014

Not with this particular code I'm afraid, but it can be done.

@bgold0

This comment has been minimized.

Show comment
Hide comment
@bgold0

bgold0 Jan 26, 2015

This seems to work great. However, what the $.drags() did well was when dragging on a scaled div, the draggable div didn't expand. On this one it does while dragging. If that makes any sense.

bgold0 commented Jan 26, 2015

This seems to work great. However, what the $.drags() did well was when dragging on a scaled div, the draggable div didn't expand. On this one it does while dragging. If that makes any sense.

@rajputvishal

This comment has been minimized.

Show comment
Hide comment
@rajputvishal

rajputvishal Aug 5, 2015

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

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

@mustafawm

This comment has been minimized.

Show comment
Hide comment
@mustafawm

mustafawm Dec 2, 2015

Nice, thanks.

Nice, thanks.

@Jaynator495

This comment has been minimized.

Show comment
Hide comment
@Jaynator495

Jaynator495 Feb 12, 2016

@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)

@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)

@joyously

This comment has been minimized.

Show comment
Hide comment
@joyously

joyously May 10, 2016

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment