javascript - Jquery dragging two classes together at the same time -

javascript - Jquery dragging two classes together at the same time -

i trying create own timeline has 2 separate divs same class. grouping these 2 classes can both dragged @ same time, no matter 1 select.

reason this, because have 1 div displays timeline of years, , content corresponding years. scroll left right, both elements must move @ same time.

this have...

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 drag timeline</p> </div> </div>

js

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

fiddle http://jsfiddle.net/kze6bqzk/

any help on appreciated.

you wrap both of divs in single "draggable" block.

this keeps 2 content divs seperate allow utilize them in code see fit, wrapper "draggable" div ensures moved together.

<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 drag timeline</p> </div> </div> </div>

jsfiddle

javascript jquery