jquery同時拖拽兩個類

Question

我想創建我自己的時間線，它有兩個單獨的div與同一個類。我想要做的是將這兩個類組合在一起，以便它們都可以同時拖動，而不管選擇哪一個。

原因是因爲我將有一個div顯示年份的時間軸，另一個div顯示相應年份的內容。因此，當您從左至右滾動時，兩個元素必須同時移動。

這是目前我有什麼...

HTML

<div id="timeline-container" class="col-sm-12"> 
    <div id="timeline" class="draggable"> 
     <ul class="years"> 
      <li id="first"><p>1900</p></li> 
      <li><p>1980</p></li> 
      <li><p>1990</p></li> 
      <li><p>2000</p></li> 
      <li><p>2010</p></li> 
      <li><p>2020</p></li> 
     </ul> 
    </div> 
    <div class="draggable"> 
     <p>This text needs to drag with the timeline</p> 
    </div> 
</div> 

JS

$('.draggable').draggable({ 
    axis: 'x' 
}); 

小提琴 http://jsfiddle.net/kze6bqzk/

任何幫助，將不勝感激。

Answer 1

你可以將這兩個div都封裝在一個「可拖動」塊中。

這會保持兩個內容div獨立，這將允許您在代碼中使用它們，因爲您認爲合適，但包裝「draggable」div確保它們一起移動。

<div id="timeline-container" class="col-sm-12"> 
    <div class="draggable"> 
     <div id="timeline"> 
      <ul class="years"> 
       <li id="first"><p>1900</p></li> 
       <li><p>1980</p></li> 
       <li><p>1990</p></li> 
       <li><p>2000</p></li> 
       <li><p>2010</p></li> 
       <li><p>2020</p></li> 
      </ul> 
     </div> 
     <div> 
      <p>This text needs to drag with the timeline</p> 
     </div> 
    </div> 
</div> 

JSFiddle