[ACCEPTED]-grouping draggable objects with jquery-ui draggable-jquery-ui-droppable

Accepted answer

Score: 77

You could use the draggable's helper option to 7 drag groups of items.

For example, if your 6 draggables have checkboxes, you can return 5 the selected items from the helper function 4 like so:

$('#dragSource li').draggable({
  helper: function(){
    var selected = $('#dragSource input:checked').parents('li');
    if (selected.length === 0) {
      selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
  }
});

Demo

I've setup a demo with draggable 3 images with checkboxes and somewhat fluid 2 layout. Click "Run Code Snippet" at 1 the bottom to see the result:

$(function() {

  $('#dragSource li').draggable({
    helper: function() {
      var selected = $('#dragSource input:checked').parents('li');
      if (selected.length === 0) {
        selected = $(this);
      }
      var container = $('<div/>').attr('id', 'draggingContainer');
      container.append(selected.clone());
      return container;
    }
  });

  $('#dropTarget').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this).append(ui.helper.children());
    }
  });

  $('#selectAll').click(function() {
    $('#dragSource input').prop('checked', true);
    return false;
  });

  $('#selectNone').click(function() {
    $('#dragSource input').prop('checked', false);
    return false;
  });

  $('#selectInvert').click(function() {
    $('#dragSource input').each(function() {
      var $this = $(this);
      if ($this.prop('checked')) {
        $this.prop('checked', false);
      } else {
        $this.prop('checked', true);
      }
    });
    return false;
  });
});

body {
  font-family: sans-serif;
  overflow-x: hidden;
}
div {
  margin: 5px;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  white-space: nowrap;
}
#selectActions span,
#selectActions li {
  float: left;
  padding: 5px;
}
.droppableContainer {
  width: 48%;
  float: left;
  min-height: 200px
}
.droppableContainer li {
  height: 90px;
  width: 110px;
  margin: 2px;
  background-color: white;
  padding-bottom: 4px;
}
.droppableContainer img {
  width: 90px;
  max-height: 90px;
  max-width: 90px;
  width: 90px;
  vertical-align: middle;
}
.droppableContainer input {
  height: 90px;
  vertical-align: middle;
}
#draggingContainer {
  width: 48%;
}
#draggingContainer input {
  visibility: hidden;
}
#dropTarget {
  border: 3px dashed grey;
}
#dropTarget input {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="selectActions">
  <span>Select:</span>
  <ul>
    <li><a id="selectAll" href="#">all</a>
    </li>
    <li><a id="selectNone" href="#">none</a>
    </li>
    <li><a id="selectInvert" href="#">invert</a>
    </li>
  </ul>
</div>
<div style="clear:left;">
  <div id="dragSource" class="droppableContainer">
    <ul>
      <li>
        <img src="http://imgs.xkcd.com/comics/drapes.png" /><input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/misusing_slang.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/donner.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/a_new_captcha_approach.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/bug.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/open_source.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/tag_combination.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/a_simple_plan.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/it_might_be_cool.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/hedgeclipper.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pep_talk.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/regular_expressions.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pwned.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/post_office_showdown.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/im_an_idiot.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pointers.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/chess_photo.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/50_ways.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/e_to_the_pi_times_i.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/self-reference.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/starwatching.png" />
        <input type="checkbox" />
      </li>
    </ul>
  </div>

  <div id="dropTarget" class="droppableContainer">
  </div>
</div>

Score: 1

Performance Idea:

Make an invisible 'group 12 object'. When the items are checked, make 11 them children of the group object, when 10 unselected, set them back as children of 9 the document body, or static parent or whatever. You'll 8 have to translate the objects' position 7 to make sure they don't jump around, also 6 attach/detach your mouse event handlers 5 to the children of the group as you add/remove 4 them.

When you get a mouse down/up event 3 on any of the children, what you'll move 2 is actually that group object.

This should 1 make it simpler overall.

Score: 1

This the exact thing I'm trying to do. So 5 far I've not been successful, but I've found 4 this guy done it in a very complicated way. you could check 3 it out maybe you could do somthing with 2 that.

This should be a feature in draggable. I 1 hope they implement it sooner than later

Score: 1

What I've done for this is created a function 12 that you give the slave / master elements 11 to, which creates a bind() function for 10 the master (I'm only allowing a drag from 9 the master in this case, you can work around 8 this I'm sure), which makes the slave follow 7 it around using standard jQuery css.

    function overlap(slave,master) {
        $('a#groupTheseBlocks').click(function(){
            master.bind('drag', groupBlocks);
            slave.draggable('disable');

            // remember where the slave is in relation to the master
            sLeftRef = (slave.offset().left - master.offset().left);
            sTopRef = (slave.offset().top - master.offset().top);
        });


        function groupBlocks() {
            var left = master.offset().left;
            var top = master.offset().top;

            slave.draggable('disable');
            slave.css('left', (left + sLeftRef) + 'px');
            slave.css('top', (top + sTopRef) + 'px');

        } 
    }

I guess 6 I'll post more to this once I have a working 5 example. As it stands this is working for 4 me. What is missing is a way to call overlap(slave, master) with 3 the elements you want to group together. I'm 2 doing this in a really specific way. You 1 can clever a way to do it, I'm sure.

Source: stackoverflow.com

[ACCEPTED]-grouping draggable objects with jquery-ui draggable-jquery-ui-droppable

Demo

How do I highlight a droppable area on hover using jquery ui draggable

draggable button using jQuery UI

How to catch dragend event in JavaScript?

Restrict jQuery draggable items from overlapping/colliding with sibling elements

How to programmatically invoke jQuery UI Draggable drag start?

How to exclude an element from being dragged in sortable list?

How do I save the position of draggable & resizeable elements?

Jquery UI Draggable Absolute Instead of Relative?

jQuery UI draggable and adding class on drag event

Jquery UI combine sortable and draggable