Draggable Element with JQuery (No jQuery UI)
Written by Saran on October 1, 2014, Updated September 20, 2016JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
var draggable = $('#dragit'); //element
draggable.on('mousedown', function(e){
var dr = $(this).addClass("drag").css("cursor","move");
height = dr.outerHeight();
width = dr.outerWidth();
ypos = dr.offset().top + height - e.pageY,
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e){
var itop = e.pageY + ypos - height;
var ileft = e.pageX + xpos - width;
if(dr.hasClass("drag")){
dr.offset({top: itop,left: ileft});
}
}).on('mouseup', function(e){
dr.removeClass("drag");
});
});HTML
- 1
<div id="dragit">Drag me</div>Constrain movement
The following jQuery code constraints the movement of draggable element, you need to wrap the object with an outer element, which becomes the draggable area for the element.JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
var draggable = $('#dragit-contained'); //element
draggable.on('mousedown', function(e){
var dr = $(this).addClass("drag").css("cursor","move");
height = dr.outerHeight();
width = dr.outerWidth();
max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
min_left = dr.parent().offset().left;
min_top = dr.parent().offset().top;
ypos = dr.offset().top + height - e.pageY,
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e){
var itop = e.pageY + ypos - height;
var ileft = e.pageX + xpos - width;
if(dr.hasClass("drag")){
if(itop <= min_top ) { itop = min_top; }
if(ileft <= min_left ) { ileft = min_left; }
if(itop >= max_top ) { itop = max_top; }
if(ileft >= max_left ) { ileft = max_left; }
dr.offset({ top: itop,left: ileft});
}
}).on('mouseup', function(e){
dr.removeClass("drag");
});
});HTML
- 1
- 2
- 3
<div class="draggable-area">
<div id="dragit-contained">Drag me</div>
</div>
