我有这个
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>
有了这个CSS
.workflow-editor
{
position: relative;
overflow: auto;
}
.workflow-editor .node
{
position: absolute;
min-width: 64px;
min-height: 64px;
}
比打电话
$(".node","#workflowEditor").draggable({
containment: [0,500,500]
});
但是,拖动此“节点”将允许拖动到负值;似乎draggable正在使用浏览器的视口坐标来限制边界框.有没有办法告诉坐标是否相对于可拖动的父母？
注意：父母可能会随着时间的推移改变位置.
**编辑**
可拖动物所在的表面相对于其他一些内容.就像CSS指定的那样,我需要它溢出：滚动;,所以如果拖动拖动到外面,那么将显示滚动条.父母的大小是固定的.我遇到的问题是拖拽可以拖到表面的左侧(或顶部)(因此我会失去它们).我想有一个类似的行为,如将包含设置为“父”,但允许draggables溢出到父的右/底侧.
解决方法
计算节点及其父节点的边界,请检查
jsFiddle Link
根据 Jquery UI的解释
根据 Jquery UI的解释
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]
});
