Question

我正在尝试创建自己的时间轴，它有两个具有相同类的独立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包装在一个＆＃34; draggable＆＃34;块。

这使得两个内容div分开，这将允许您在代码中使用它们，但是包装器＃34; draggable＆＃34; 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

Jquery同时将两个类拖到一起

1 个答案: