0

I'm using jQuery UI to allow elements of a class. However i'd like the rest of the elements of a class to follow when one of them is being dragged. How can I do that?

So when one is dragged the rest of the class are also being dragged.

I attempted to trigger mousedown on start and mouseup on stop events on the elements so that the dragging would happen for the others when one of them is being dragged?

$('.dismissAllButton').draggable({ axis:'x', containment:'parent', start:function(){ upEvent = false; $(this).mousedown(); }, drag: function(){ $(this).mousemove(); }, stop:function(){ $(this).mouseup(); setTimeout(function(){ upEvent = true; }, 1000); }});

I also tried making itself the parent so that the others would also be dragged / follow when one of them was being dragged, but that didn't work.

$('.dismissAllButton').draggable({ axis:'x', containment:'parent', handle:'.dismissAllButton', start:function(){ upEvent = false; }, stop:function(){ setTimeout(function(){ upEvent = true; }, 1000); }});

Fiddles:

No following, just one element dragging: http://jsfiddle.net/7ta68xyt/

attempt 1, code sample 1 above, : http://jsfiddle.net/7ta68xyt/1/

attempt 2, code sample 2 above, : http://jsfiddle.net/7ta68xyt/2/

Update: I found a script on github that allows for this, but the other elements all lag behind a bit. How can I get them to lag at intervals and the end up at the same place when dragging stops or have them all drag the same ( no lag ).

Here is the fiddle: http://jsfiddle.net/7ta68xyt/3/

Here is the script: https://github.com/javadoug/jquery.drag-multiple

wordSmith
  • 2,993
  • 8
  • 29
  • 50
  • How do you imagine the dragging of the other elements, will they just move from their current position and follow the mouse movement or will they follow it like a snake? And make a fiddle with what you have so far :) – Bojan Petkovski Oct 30 '14 at 21:57
  • @BojanPetkovski as the left / right position is changed for the element actually being dragged, the others' position will be manipulated in the same way. If it is possible to add a delay so that it is like a snake, that would be great. But I have no idea how to do that. – wordSmith Oct 30 '14 at 21:58
  • @BojanPetkovski okay, updated with js fiddles. – wordSmith Oct 30 '14 at 22:06

1 Answers1

2

Here you are one option using jQuery ui http://jsfiddle.net/7ta68xyt/5/

$(".dismissAllButton").draggable({
    axis: 'x',
    containment: 'parent',
    start: function (event, ui) {
        posTopArray = [];
        posLeftArray = [];
        if ($(this).hasClass("group")) {
            $(".group").each(function (i) {
                thiscsstop = $(this).css('top');
                if (thiscsstop == 'auto') thiscsstop = 0;     
                thiscssleft = $(this).css('left');
                if (thiscssleft == 'auto') thiscssleft = 0;     
                posTopArray[i] = parseInt(thiscsstop);
                posLeftArray[i] = parseInt(thiscssleft);
            });
        }

        begintop = $(this).offset().top;
        beginleft = $(this).offset().left;
    },
    drag: function (event, ui) {
        var topdiff = $(this).offset().top - begintop;
        var leftdiff = $(this).offset().left - beginleft;

        if ($(this).hasClass("group")) {
            $(".group").each(function (i) {
                $(this).css('top', posTopArray[i] + topdiff);
                $(this).css('left', posLeftArray[i] + leftdiff);
            });
        }
    }
});
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34