Javascript Jquery同时将两个类拖到一起

我正在尝试创建我自己的时间线，它有两个单独的div和同一个类。我想做的是将这两个类分组，以便无论选择哪一个类，都可以同时拖动它们

之所以这样，是因为我将有一个div显示年份的时间线，另一个div显示相应年份的内容。因此，当您从左向右滚动时，两个元素必须同时移动

这就是我现在拥有的

HTML

拨弄

---

在此方面的任何帮助都将不胜感激。

您可以将这两个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>

1900

1980年

1990年

2000年

2010年

二零二零年


此文本需要与时间线一起拖动

---

由于复杂性，我认为这是不可能的，但通过一些调整和CSS技巧，我已经做到了，非常感谢。：）

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

<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>