使用数组的jQuery可拖动包含未按预期工作

我有这段HTML

<div id="workflowEditor" class="workflow-editor">

    <div class="node" class="ui-widget" style="top:20px; left:40px;">
        <div class="ui-widget ui-widget-header ui-state-default">Header test</div>
        <div class="ui-widget ui-widget-content">Test Content</div>
    </div>

</div>

而不是打电话

$(".node", "#workflowEditor").draggable({
    containment: [0, 0, 500, 500]
});

但是，拖动此“节点”将允许拖动为负值；似乎

draggable

正在使用浏览器的视口坐标来限制边界框。是否有某种方法可以确定坐标是相对于拖动表的父对象的

注意：家长可能会随时间改变位置

**编辑**

---

可拖动内容所在的曲面相对于其他内容。就像CSS指定的那样，我需要它是

overflow:scroll，因此，如果拖动表被拖动到外部，则将显示滚动条。父对象的大小是固定的。我遇到的问题是，拖动的对象可以拖动到曲面的左侧（或顶部）（因此我会丢失它们）。我希望有一个类似的行为，即将包容设置为“父节点”

，但允许拖拽溢出到父节点的右侧/底部。

计算节点及其父节点的边界，请检查 根据

---

我也遇到过类似的问题——我需要将“盒子”放在容器内，让它们溢出到底部或右侧，而不是左侧或顶部。我还必须支持改变容器的位置

不幸的是，我找不到一个优雅的解决方案。正如您正确地注意到的，通过坐标数组设置容器将建立与文档相关的度量，因此我们必须处理容器相对于文档的位置

我的小技巧是将容器的“文档”位置用于顶部和左侧限制（我使用jQuery

offset

[1]，并将足够大的值用于右侧和底部。我使用

dragstart

事件[2]重新读取和重置容器的视口位置（通过

选项

方法[3]将安全壳更新为容器的当前坐标）

[1]

[2]

---

[3]

否，它不是：。如前所述，容器对于浏览器视图端口是绝对的，而不是父元素（甚至元素本身）首先，整个编辑器现在是可拖动的？这是不可取的。其次，容器不是预期的容器；预期的容器是动态的，不是固定的，因此它不能是元素，而是维度。我已经尝试在其中设置另一个元素并给它一个大小，但是滚动条总是可见的，这也是不需要的。请，仔细阅读并从要求中提出适当的答案。不过，感谢您的努力：）您的建议与您的第一个答案类似。请阅读问题的最后一句话：“我希望有一种类似于将控制设置为“家长”的行为“，但允许拖拽内容溢出到父对象的右侧/底部。”这就是我需要的。您的解决方案仍然不允许拖拽内容超出边界（因此在父对象内部溢出）。简言之，包含内容应该相对于父对象

#workflowEditor

。

$(".node", "#workflowEditor").draggable({
    containment: [0, 0, 500, 500]
});

var containmentX1 = $(".node").parent().offset().left;
var containmentY1 = $(".node").parent().offset().top;
var containmentX2 =  ($(".node").parent().outerWidth() +  $(".node").parent().offset().left - $('.node').outerWidth())
var containmentY2 = ($(".node").parent().outerHeight() +  $(".node").parent().offset().top - $('.node').outerHeight()) 

$(".node").draggable({
    containment:  [containmentX1, containmentY1, containmentX2, containmentY2]
});

var $containerEl = $('#container'),
    $draggableEl = $('#my-draggable');

$draggableEl.on('dragstart', function (e) {
    $(e.target).draggable('option',
                          'containment',
                          [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]);
});

$draggableEl.draggable({
    containment: [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]
});