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

Question

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

我是这样启用可拖动和可放置功能的：

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

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

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

- xus

Answer 1

请使用“containment”选项：

jQuery UI API - 可拖动小部件 - containment

文档中说它只接受以下值：'parent'、'document'、'window'、[x1, y1, x2, y2]，但我记得它也可以接受选择器，例如'#container'。

- Mattyod

---

我为你点赞，朋友。你帮了我很多；）通过阅读你的回答中的第一行和建议值，问题已经得到解决。 - Smile

它似乎无法接受选择器。即使我输入了一个选择器，它也会拖动超出该选择器的范围。还有其他方法可以解决这个问题吗？不管怎样，点赞！ - harishannam

@Mattyod，如何在不使用容器的情况下完成这个任务？ - Mohammad Kermani

当我使用包含时，它不允许可拖动的项目完全到达对象的边缘。 - Ethan Leyden

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" });

- Limitless isa

---

感谢您发布答案！请务必仔细阅读有关自我推广的FAQ。还请注意，每次链接到您自己的网站/产品时，必须发布免责声明。 - Andrew Barber

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);
    },
});

- mbokil

Answer 4

请参阅官方文档中containment选项的摘录：

containment

默认值：false

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

• 选择器：可拖动元素将被限制在选择器找到的第一个元素的边界框内。如果没有找到元素，则不设置任何限制。
• 元素：可拖动元素将被限制在该元素的边界框内。
• 字符串：可能的值："parent"、"document"、"window"。
• 数组：以 [ x1, y1, x2, y2 ] 的形式定义边界框的数组。

代码示例：
初始化带有指定 containment 选项的可拖动元素：

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

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

// 获取器
var containment = $( ".selector" ).draggable( "option", "containment" );
// 设置器
$( ".selector" ).draggable( "option", "containment", "parent" );

- naXa stands with Ukraine

---

具体元素怎么样？我不想添加“parent”，“document”，“window”。 - Code_S

Answer 5

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

- Rahul Ratnam