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

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/

要求:拖动父栏时，应将子项与其一起拖动。 问题:父项和子项没有容器元素。它们呈现为 sibling 。

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

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