0

Is is possible to set up a group of multiple jquery ui elements to all respond to interactions with any one in the group?

edit: For example, I've got several version of very similar images, which I've group into different pages with jquery.tabs(). The images are all manipulatable with various jquery ui things (dragable, resizable etc.). All of my tabs should look identical, except for the path to the images. So when I drag or resize an image in one tab, I'd like the corresponding image in a the other tabs to do the same.

ajwood
  • 18,227
  • 15
  • 61
  • 104
  • Find this answer. It might be helpful. http://stackoverflow.com/questions/793559/grouping-draggable-objects-with-jquery-ui-draggable – DG3 Feb 25 '12 at 03:47

3 Answers3

1

use for example: $('#element1').add($('#element2).draggable();

but if you want to drag element1 when element2 is dragged : since during drag the element gets a class of ui-draggable-dragging use :

if($('#element1')).hasClass('ui-draggable-dragging')){
  //drag #element2
}
Mouna Cheikhna
  • 38,870
  • 10
  • 48
  • 69
  • How about putting all grouped elements in a div and make the div draggable? – glortho Feb 25 '12 at 03:40
  • @jed i used add just to demonstrate if OP had two collection of elements like col1.add(col2) – Mouna Cheikhna Feb 25 '12 at 03:46
  • I'm using jquery.tabs() for different versions of very similar data. I'm trying to make it so that a change in one tab will propagate and everything will look the same when switching into the other tabs... should I have included that in the question? – ajwood Feb 25 '12 at 03:47
  • In that case, I would just use the `stop` callback to get the dragged object's new position and move the related elements on the other tabs to those coordinates (by specifying `top` and `left` or whatever). – glortho Feb 25 '12 at 03:51
1

What you want to do can be accomplished by using the events that the UI objects provide such as drag for draggable():

Example: http://jsfiddle.net/elclanrs/WcNNb/2/

$('#drag1').draggable();
$('#drag2').draggable({
    drag: function(){
        $('#drag1').offset({
            top: $(this).offset().top,
            left: $(this).offset().left - $('#drag1').width() - 20
        });
    }
});
elclanrs
  • 92,861
  • 21
  • 134
  • 171
1

Let's make the assumption that similar elements have a common classname, eg `class="elementType_n".

Then you can select all similar elements and act on them as one or in sequence, as follows:

javascript:

$selection_n = $(".elementType_n");
$selection_n.on('eventType', function(){
    //Here, depending on the action, either
    //* act on $selection_n all together, eg. $selection_n.methodA(...)..methodB(...);
    // or
    //* act on $(this) with eg. $(this).methodA(...)..methodB(...); then use $(this)'s resulting properties to act on the rest of the selection, eg. $selection_n.not($(this).methodA(...)..methodB(...);
});

For draggables, there's no point dragging hidden elements in sympathy with the visible, dragged element. Who's going to see them move? Instead, establish a drag.oncomplete handler to set the invisibles' offsets to match the dragged element's offsets. End result - identical. Efficiency - greater. (Droppable is another matter).

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44