Skip to content

Instantly share code, notes, and snippets.

@Arty2
Last active November 26, 2020 12:28
Show Gist options
  • Save Arty2/11199162 to your computer and use it in GitHub Desktop.
Save Arty2/11199162 to your computer and use it in GitHub Desktop.
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);
@joyously
Copy link

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