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) {
top: e.pageY,
left: e.pageX

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

$(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