jquery draggable: how to limit the draggable area?
Solution 1:
Use the "containment" option:
jQuery UI API - Draggable Widget - containment
The documentation says it only accepts the values: 'parent'
, 'document'
, 'window'
, [x1, y1, x2, y2]
but I seem to remember it will accept a selector such as '#container' too.
Solution 2:
$(function() { $( "#draggable" ).draggable({ containment: "window" }); });
of this code does not display. Full code and Demo: http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html
In order to limit the element inside its parent:
$( "#draggable" ).draggable({ containment: "window" });
Solution 3:
Here is a code example to follow. #thumbnail is a DIV parent of the #handle DIV
buildDraggable = function() {
$( "#handle" ).draggable({
containment: '#thumbnail',
drag: function(event) {
var top = $(this).position().top;
var left = $(this).position().left;
ICZoom.panImage(top, left);
},
});