0

I'm interested in best way to achieve dragging multiple selected elements using (JQuery (Ui)).

At the moment I'm using this piece of code

// Make all divs inside draggableArea draggable

$("#dragableArea div").draggable({

     start : function() {

     }

     drag : function() {
          // Calculate position of other selected elements here
          // by hand
     }

     stop : function() {

     }

});

I'm curious to know if there is some better way to achieve the same thing? I would like to trigger the drag event on all selected items, so that they automatically move when any of them is dragged. Is it possible and if yes how (at least in theory)?

Iain M Norman
  • 2,075
  • 15
  • 30
Marko Jovanović
  • 2,647
  • 3
  • 27
  • 36

2 Answers2

1

Here's a working group move based on Neal's solution but perhaps a bit more readable (for me anyway) and with comments: http://jsfiddle.net/stevea/CrJbQ/. It works like a graphic program's "group" function. Click the boxes you want to group. This puts them onto a "group plane." Move the group plane by dragging it or any of the grouped boxes. Click the group plane to ungroup the grouped boxes, leaving them at their new position. 

<div id='box1' class='box'></div>
<div id='box2' class='box'></div>
<div id='box3' class='box'></div>
<div id='box4' class='box'></div>
<div id='group'></div>  // group plane
Steve
  • 4,534
  • 9
  • 52
  • 110
1

Try this out: http://jsfiddle.net/maniator/zVZFq/5/

Based on my answer (and comments) here: How do I drag multiple elements at once with JavaScript or jQuery?

Click to activate the multi-drag.

Community
  • 1
  • 1
Naftali
  • 144,921
  • 39
  • 244
  • 303
  • While your example works fine, when you click a red square, it goes back to its original position before you clicked it to turn into a red square. – Ivan Jun 30 '11 at 15:53
  • @ivan - i admit it is a bit buggy, but its a start – Naftali Jun 30 '11 at 16:03
  • 1
    Understandable, the main point of your example is that multiple dragging can be done. +1. – Ivan Jun 30 '11 at 17:13
  • Thanks for the code example, but at the end I ended up using this "plugin" from [threedubmedia](http://threedubmedia.com/code/event/drag "Threedubmedia.com"). It's awesome :) – Marko Jovanović Jun 30 '11 at 23:28