javascript - dragging all elements of class when one is being dragged ( jQuery UI draggable ) -

javascript - dragging all elements of class when one is being dragged ( jQuery UI draggable ) -

i'm using jquery ui allow elements of class. i'd rest of elements of class follow when 1 of them beingness dragged. how can that?

so when 1 dragged rest of class beingness dragged.

i attempted trigger mousedown on start , mouseup on stop events on elements dragging happen others when 1 of them beingness 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 tried making parent others dragged / follow when 1 of them beingness dragged, 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, 1 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: found script on github allows this, other elements lag behind bit. how can them lag @ intervals , end @ same place when dragging stops or have them drag same ( no lag ).

here fiddle: http://jsfiddle.net/7ta68xyt/3/

here script: https://github.com/javadoug/jquery.drag-multiple

here 1 alternative 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); }); } } });

javascript jquery jquery-ui jquery-ui-draggable jquery-draggable