Skip to content

@Arty2 /jquery.draggable.js
Last active

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

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
Owner

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

@bgold0

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.