перетаскивать дочерние элементы при перетаскивании родителя - jquery ui draggable

Я создал визуализацию запланированных действий в форме диаграммы gantt на основе jsgantt library. Каждое действие должно быть перетаскиваемым, и я достиг этого, используя библиотеку jQuery UI draggable.перетаскивать дочерние элементы при перетаскивании родителя - jquery ui draggable

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. Это не точный код, который я использую, но очень похожий на фактический код. У меня есть массив, который содержит информацию о отношении parent-child, которое я использую для динамического определения родительского местоположения дочернего элемента div.

источник

2015-04-10 Neel

Вы можете изменяющие HTML вообще? Если вы можете обернуть братьев и сестер, которые вы хотите переместить вместе, вы можете установить «родительский» в качестве дескриптора и настроить перетаскивание обертки. https://jqueryui.com/draggable/#handle – simpleManderson

Да, я могу редактировать html с помощью jQuery во время выполнения и добавлять родительский div, но мне еще не удается перетащить родительский элемент вместе с дочерним. Возможно ли изменить код скрипта, который я могу использовать в качестве примера? – Neel

Ах, даже не видел твоей скрипки! Здесь это: http://jsfiddle.net/mm0efp9a/1/. Детские элементы по-прежнему перетаскиваются в соответствующие группы, и если вы перетаскиваете родительский элемент, весь список перемещается. Если это то, что вы хотели, я напишу это как ответ. – simpleManderson

Если вы можете изменить HTML, вы можете обернуть каждый список и сделать перетаскиваемую оболочку, с параметром handle, установленным в «родительский» элемент. Это позволит вам перетащить весь список только через «родительский» и все равно сможет сделать каждый элемент «child» перетаскиваемым. См. 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" 
    });

источник

2015-04-10 06:47:08 simpleManderson

перетаскивать дочерние элементы при перетаскивании родителя - jquery ui draggable

ответ

Смежные вопросы