拖动父元素时拖动子元素 - jquery ui draggable答案

【问题标题】：drag child elements when parent is dragged - jquery ui draggable拖动父元素时拖动子元素 - jquery ui draggable
【发布时间】：2015-04-10 03:42:03
【问题描述】：

我基于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 的父位置。

【问题讨论】：

你能改变 HTML 吗？如果可以将要移动的兄弟姐妹包装在一起，则可以将“父级”设置为句柄并将包装器设置为可拖动。 jqueryui.com/draggable/#handle
是的，我可以在运行时使用 jQuery 编辑 html 并添加父 div，但我仍然无法将父级与子级一起拖动。您是否可以修改我可以用作示例的小提琴代码？
啊，连你的小提琴都没看到！这里是：jsfiddle.net/mm0efp9a/1 子项在它们各自的组中仍然是可拖动的，如果你拖动父项，整个列表就会移动。如果这就是你想要的，我会写下来作为答案。
是的，这正是我所需要的......谢谢

标签： javascript jquery jquery-ui

【解决方案1】：

如果您可以修改 HTML，则可以包装每个列表并使包装器可拖动，并将句柄选项设置为“父”元素。这将允许您仅通过“父”拖动整个列表，并且仍然能够使每个“子”元素也可拖动。详情请见https://jqueryui.com/draggable/#handle。

Updated fiddle 下面有相关的 sn-ps。此外，必须在包装元素上触发收缩以适应，否则它会填充其整个父宽度并且如果设置了包含则无法拖动。我能想到的最简单的方法是.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"
    });

【讨论】：