Sébastien Gicquel Sébastien Gicquel - 1 year ago 103
Javascript Question

Drag multiple elements with jquery.event.drag

I want to drag multiple elements with the jQuery plugin jquery.event.drag

Here is a fiddle of the original demo :

Here is the link to the original demo :

On the demo, the user clicks on squares he wants to select and drag them.

But i want to do something simplest : Just click on the square "1" and move all the squares.

I've tried different things and the result is not good, see this fiddle :


Can you help me to that that ?

HTML code :

<div class="drag" style="left:20px;"></div>
<div class="drag" style="left:100px;"></div>
<div class="drag" style="left:180px;"></div>

CSS code

.drag {
position: absolute;
border: 1px solid #89B;
background: #BCE;
height: 58px;
width: 58px;
cursor: move;
top: 120px;
.selected {
background-color: #ECB;
border-color: #B98;


$( this ).toggleClass("selected");
if ( $( this ).is('.selected') )
return $('.selected');
.drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX

The link given in Rajagopal's answer is ok.
I've also found this plugin MultiDraggable which is really easy to use : https://github.com/someshwara/MultiDraggable

Answer Source

You have to do something like this,

$('.drag').drag("init", function(ev, dd) {
    if (this.id == "test") {
        return $(".drag").addClass("selected");
}).drag(function(ev, dd) {
    if (ev.target.id == "test") {
            top: dd.offsetY,
            left: dd.offsetX

Here is the working sample. Hope, this one will help you.


You can simply use jquery-ui draggable plugin for this case. Take a look at this http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/. Hoep, this one will help you!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download