Thursday, April 19, 2012

Limiting a draggable element within a container

I have made a div draggable without using the jquery ui library, but I want to make the draggable box, not to leave its container.



Here is my demo



$(document).ready(function() {
var $dragging = null;

$(document.body).on("mousemove", function(e) {
if ($dragging) {
$dragging.offset({
top: e.pageY,
left: e.pageX
});
}
});

$(document.body).on("mousedown", ".box", function (e) {
$dragging = $(e.target);
});

$(document.body).on("mouseup", function (e) {
$dragging = null;
});
});?


How to do this? Please NOTE, I am not using JQUERY UI.





No comments:

Post a Comment