Question

我有一个可拖动的对象（div）和一些可放置的对象（表TD）。我希望用户将我的可拖动对象拖到其中一个可放置的TD中。

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

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

问题在于，用户可以将div拖动到屏幕上的任何位置，包括在可放置区域之外。

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

Answer 1

使用“收容”选项：

jQuery UI API - Draggable Widget - containment

文档说它只接受以下值：'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);
    },
});

Answer 4

请参阅containment option的官方文档摘录：

容纳

默认： false

约束拖动到指定的范围内   元素或区域   支持多种类型：


选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果未找到任何元素，则不会设置包含。

元素：可拖动元素将包含在此元素的边界框中。

字符串：可能的值："parent"，"document"，"window"。

数组：定义[ x1, y1, x2, y2 ]形式的边界框的数组。


代码示例：
  使用指定的containment选项初始化draggable：
$( ".selector" ).draggable({
    containment: "parent" 
}); 
初始化后获取或设置containment选项：
// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

Answer 5

$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});

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

5 个答案:

容纳