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

我有一个可拖动的对象（div）和一些可拖动的对象（表格TD）。 我希望用户把我的可拖动的对象拖到其中一个可丢弃的TD上。

我可以通过这种方式来拖放和拖放：

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

问题在于，用户可以通过拖动屏幕上的任何位置，包括可投放区域。

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

Answer 1

使用“包容”选项：

http://docs.jquery.com/UI/Draggable#option-containment

文档说它只接受'父'，'文档'，'窗口'，[x1，y1，x2，y2]的值，但我似乎记得它也会接受一个select器，如“#container”。

Answer 2

以下是一个代码示例。 #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); }, }); 

Answer 3

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

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

为了限制其父代中的元素：

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