jquery draggable:如何限制可拖动区域？

Question

我有一个可拖动的对象(div),还有一些可放置的对象(表TD).我希望用户将我的可拖动对象拖到其中一个可放置的TD上.

我以这种方式启用draggable和droppable:

$(".draggable").draggable();
$(".droppable").droppable();

问题在于,用户可以将div拖动到屏幕上的任何位置,包括从可放置区域移出.

如何限制可拖动对象的边界区域？

Answer 1

使用"收容"选项:

jQuery UI API - 可拖动小部件 - 包含

文档说它只接受的值:'parent','document','window',[x1, y1, x2, y2]但我似乎记得它会接受一个选择,如"#container的"太多.

Answer 2

$(function() { $( "#draggable" ).draggable({ containment: "window" }); });

此代码不显示.完整代码和演示:http: //www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

为了限制其父元素内的元素:

$( "#draggable" ).draggable({ containment: "window" });

Answer 3

这是一个代码示例.#thumbnail是#handle DIV的DIV父级

buildDraggable = function() {
    $( "#handle" ).draggable({
    containment: '#thumbnail',
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;

        ICZoom.panImage(top, left);
    },
});