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 clic

Solution 1:

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") {
        $(this).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    }
});​

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

EDIT:

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!

Solution 2:

jQuery(function($) {

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

Demo http://jsfiddle.net/gVFCL/3/

Solution 3:

My code upgrade multi drag and multi select:

http://jsfiddle.net/F4AwY/

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

$('div[class*="drag"]').click(function(){
    $(this).toggleClass("selected");
})

Solution 4:

In the original jsfiddle change

.click(function(){
        $(this).toggleClass("selected");
    })

to

.click(function(){
        $('.drag').toggleClass("selected");
    })