Question

我已根据jsgantt library以甘特图表格创建了计划活动的可视化。每个活动都应该是可拖动的，我已经通过jQuery UI可拖动库实现了这一点。

HTML

<div class="container">
<div id="task_1" class="parent_bar" style="height:30px;width:190px"></div>
<div id="task_2" class="child_bar1"></div>
<div id="task_3" class="child_bar2"></div>
<div id="task_4" class="child_bar3"></div>

<div id="task_5" class="parent_bar" style="height:30px;width:150px"></div>
<div id="task_6" class="child_bar1"></div>
<div id="task_7" class="child_bar2"></div>
<div id="task_8" class="child_bar3"></div>

</div>

jQuery代码

$(document).ready(function(){

    $(".child_bar1,.child_bar2,.child_bar3").draggable({
        axis:"x",
        containment: ".parent_bar"
    });

});

http://jsfiddle.net/mm0efp9a/

要求：拖动父栏时，应同时拖动子项。 问题：父项目和子项目没有容器元素。他们被渲染为兄弟姐妹。

当拖动一个特定元素时，是否可以自动拖动多个元素。

P.S。这不是我使用的确切代码，但与实际代码非常相似。我有一个数组，其中包含有关父子关系的信息，我用它来动态定义基于父级位置的子包含div。

Answer 1

如果您可以修改HTML，则可以包装每个列表并使包装器可拖动，并将handle选项设置为“parent”元素。这将允许您仅通过“父”拖动整个列表，并且仍然可以使每个'子'元素也可以拖动。有关详细信息，请参阅https://jqueryui.com/draggable/#handle。

Updated fiddle以下相关摘要。此外，必须触发包装元素上的缩小到适合，否则它将填充其整个父宽度，并且如果设置了包含则无法拖动。我能想到的最简单方法是.task_list{display:table;}

HTML：

<div id="task_list_1" class="task_list">
    <div id="task_1" class="parent_bar" style="height:30px;width:190px">    </div>
    <div id="task_2" class="child_bar1"></div>
    <div id="task_3" class="child_bar2"></div>
    <div id="task_4" class="child_bar3"></div>
</div>

JS：

$(".task_list").draggable({
        handle: $(".parent_bar"),
        containment: ".container"
    });

拖动父级时拖动子元素 - jquery ui draggable

1 个答案: