Home/ Questions/Q 528089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:57:02+00:00

Let’s say I have something set to be dragged: <div class=container> <div id=draggable-1></div> <div

  • 0

Let’s say I have something set to be dragged:

<div class="container">
  <div id="draggable-1"></div>
  <div id="draggable-3"></div>
  <div id="draggable-4"></div>
  <div id="draggable-5"></div>
</div>

Is it possible to set jqueryui’s draggable api so I can drag multiple draggable elements at the same time?
Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this is a guess but try

    set no style sheet on container so it is set as a group. then do this

    $(function() {

$(".container").draggable();

});

    then when you drag the entire container drags as a group including all elements inside.

    here is a working example of what i did.

    <html>
<head>
<style type="text/css">

#draggable-1,#draggable-2,#draggable-3,#draggable-4,#draggable-5 {

width:100px;
height:100px;
background:red;
margin-bottom:10px;

}

.container {
}
</style>

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

<script type="text/javascript">

$(function() {

$(".container").draggable();

});


</script>
</head>
<body>

<div class="container">
  <div id="draggable-1"></div>
  <div id="draggable-3"></div>
  <div id="draggable-4"></div>
  <div id="draggable-5"></div>
</div>


</body>
</html>
    • 0