Make a group draggable

1

I have added Jquery & JqueryUI and can use the following on SceneLoad to allow a div or class to be dragged:

$("#dragger").draggable({ containment: "parent" });
$("#dragger2").draggable({ containment: "parent" });
$("#dragBox").draggable({ containment: "parent" });
$(".dragClass").draggable({ containment: "parent" });

However it does not work on a group (using ID or a class). Is this possible ?

Cheers

Steve Warby

2

Been playing around.

If the elements in the group are not draggable the the group is draggable.

So the question now is how do I make a group draggable and its elements

Cheers

Steve Warby

3

If the elements in the group are in a class that are draggable I can’t drag the group.

If the elements in the group are separate IDs and are draggable I can drag the group.

4

I think this is a simple matter of selector hierarchy. If you use the same class on the the container and its descendants the highest ranking group member will the benefit as the selector affects them all at once.

Also make sure to read about event bubbling to deepen the understanding behind this behavior…

1 Like
5

My brains bubbled out now…

I have it now thanks…

I have now added the ‘stack’ option which is supposed to bring the moved element to the top but it is not working.

$("#allowGroupDrag").draggable({ containment: "parent" });
$("#allowGroupDrag2").draggable({ containment: "parent" });
$("#allowDrag1").draggable({ containment: "parent" });
$("#allowDrag2").draggable({ containment: "parent" });
$("#allowDrag3").draggable({ containment: "parent" });
$(".allowDrag").draggable({ containment: "parent" , stack: ".allowDrag" });

draggable.hype.zip (216.6 KB)

Cheers

Steve Warby