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

【问题标题】：jquery draggable: how to limit the draggable area?jquery draggable：如何限制可拖动区域？
【发布时间】：2011-03-15 07:25:29
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： jquery draggable

【解决方案1】：

使用“遏制”选项：

jQuery UI API - Draggable Widget - containment

文档说它只接受以下值：'parent'、'document'、'window'、[x1, y1, x2, y2]，但我似乎记得它也会接受诸如“#container”之类的选择器。

【讨论】：

我点赞了朋友。您为我节省了很多；）刚刚通过阅读第一行解决了问题，这是您的答案中的推荐值。
它不接受选择器。即使我输入一个选择器，它也会拖到该选择器之外。还有其他方法可以做到这一点吗？无论如何都竖起大拇指！
@Mattyod 在没有收容措施的情况下如何做到这一点？
当我使用遏制时，它不会让可拖动项目一直到对象的边缘

【解决方案2】：

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

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

为了限制元素在其父元素内：

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

【讨论】：

感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。另请注意，每次链接到自己的网站/产品时，都要求发布免责声明。

【解决方案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);
    },
});

【讨论】：

【解决方案4】：

查看containment option官方文档的摘录：

遏制

默认： false

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

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

元素：可拖动元素将包含在该元素的边界框内。

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

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

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

【讨论】：

具体元素呢？，我不想添加“父”、“文档”、“窗口”

【解决方案5】：

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

【讨论】：