當拖動一個類時拖動類的所有元素（jQuery UI可拖動）

我正在使用jQuery UI來允許一個類的元素。不過，我希望當其中一個被拖動的時候，一個類的其他元素可以遵循。我怎樣才能做到這一點？當拖動一個類時拖動類的所有元素（jQuery UI可拖動）

所以當一個人被拖動時，其餘的課也被拖動。

我試圖在元素上的stop事件上觸發mousedown，這樣當其中一個元素被拖動時，拖動就會發生在其他元素上。

$('.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); }});

我也試圖使自己的父母，這樣其他人也將被拖入/跟蹤時，其中一人被拖動，但沒有奏效。

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

小提琴：

否下文中，僅一個元件拖動：http://jsfiddle.net/7ta68xyt/

試圖1，上面的代碼示例1，：http://jsfiddle.net/7ta68xyt/1/

嘗試2，上面的代碼示例2，：http://jsfiddle.net/7ta68xyt/2/

更新：我在github上發現了一個允許這樣的腳本，但是其他呃元素都落後了一點。我怎麼才能讓它們在間隔時間內滯後，並在拖動停止時將它們拖到相同的地方，或者讓它們都拖動相同（無滯後）。

這裏是小提琴：http://jsfiddle.net/7ta68xyt/3/

下面是腳本：https://github.com/javadoug/jquery.drag-multiple

來源

2014-10-30 wordSmith

你如何想像其他元素的拖動一個選項，他們是否會從目前的位置移動並跟隨鼠標移動，還是會像蛇一樣跟隨它？到目前爲止，你可以撥弄一下你的東西:) – 2014-10-30 21:57:01

@BojanPetkovski當左/右位置改變爲實際被拖動的元素時，其他位置將以相同的方式被操縱。如果有可能增加延遲，使它像蛇一樣，那就太好了。但我不知道該怎麼做。 – wordSmith 2014-10-30 21:58:49

@BojanPetkovski好了，用js小提琴更新。 – wordSmith 2014-10-30 22:06:45

在這裏，你是使用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); 
      }); 
     } 
    } 
});

來源

2014-10-30 22:46:03

當拖動一個類時拖動類的所有元素（jQuery UI可拖動）

回答

相關問題