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

jquery draggable: how to limit the draggable area?

提问by xus

I have a draggable object (div), and some droppable ones (table TD's). I want the user to drag my draggable object to one of those droppable TD's.

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

I enable draggable and droppable this way:

我以这种方式启用可拖动和可放置：

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

The problem is that with this the user can drag the div anywhere on the screen, including out of the droppable area.

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

How can I limit the boundary area for the draggable object?

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

回答by Mattyod

Use the "containment" option:

使用“遏制”选项：

jQuery UI API - Draggable Widget - containment

jQuery UI API - Draggable Widget - 包含

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.

文档说它只接受值：'parent', 'document', 'window'，[x1, y1, x2, y2]但我似乎记得它也会接受一个选择器，比如“#container”。

回答by Limitless isa

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

此代码的不显示。完整代码和演示：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" });

回答by mbokil

Here is a code example to follow. #thumbnail is a DIV parent of the #handle DIV

这是要遵循的代码示例。#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);
    },
});

回答by naXa

See excerpt from official documentation for containmentoption:

有关containment选项，请参阅官方文档的摘录：

containment

Default:false

Constrains dragging to within the bounds of the specified element or region.
Multiple types supported:

• Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
• Element: The draggable element will be contained to the bounding box of this element.
• String: Possible values: "parent", "document", "window".
• Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

Code examples:
Initialize the draggable with the containmentoption specified:

$( ".selector" ).draggable({
    containment: "parent" 
}); 

Get or set the containmentoption, after initialization:

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

遏制

默认：false

将拖动限制在指定元素或区域的范围内。
支持多种类型：

• Selector：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果未找到元素，则不会设置包含。
• Element：可拖动元素将包含在此元素的边界框内。
• 字符串：可能的值："parent"、"document"、"window"。
• Array：一个数组，在表单中定义一个边界框[ x1, y1, x2, y2 ]。

代码示例：
使用containment指定的选项初始化可拖动对象：

$( ".selector" ).draggable({
    containment: "parent" 
}); 

containment初始化后获取或设置选项：

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

回答by Rahul Ratnam

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