title: Synchronize positions of two draggable elements
body: <p>I'm working on an interactive application using a draggable time-line.</p>
  
  <p>This time-line have two visual states (open and closed) and the users can drag it on the left and the right.</p>
  
  <p>When a user toggles visual states, the application need to display the same time-line part.</p>
  
  <p>HTML part :</p>
  
  <pre><code>&lt;div class="timeline"&gt;
    &lt;div class="on"&gt;
      &lt;div class="group"&gt;
        &lt;div class="image"&gt;
          &lt;div class="fr"&gt;
          &lt;/div&gt;
          &lt;div class="en"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="arrow left"&gt;
        &lt;/div&gt;
        &lt;div class="arrow right"&gt;
        &lt;/div&gt;          
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="off"&gt;
      &lt;div class="group"&gt;
        &lt;div class="image"&gt;
        &lt;/div&gt;
        &lt;div class="arrow left"&gt;
        &lt;/div&gt;
        &lt;div class="arrow right"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I just want to drag image sub-elements and not the whole timeline element.</p>
  
  <p>jQuery part:</p>
  
  <pre><code>function _timelineOnClicked()
  {
    return function()
    {
      $( '.timeline .on' ).fadeOut();
      $( '.timeline .off' ).fadeIn();
  
      // TODO : Synchronise positions...
    }
  }
  
  function _timelineOffClicked()
  {
    return function()
    {
      $( '.timeline .off' ).fadeOut();
      $( '.timeline .on' ).fadeIn();
  
      // TODO : Synchronise positions...
    }
  }    
  
  function _timelineInitialize()
  {    
    $( '.timeline .off .image' ).draggable( {
        axis : 'x',
        containment: [ 1280 - 1613, 0, 0, 0 ]
      } );
  
    $( '.timeline .on .image' ).draggable( {
        axis : 'x',
        containment: [ 1280 - 1613, 0, 0, 0 ]
    } );
  
    $( '.timeline .on .arrow' ).each( function() {
      $( this ).click( _timelineOnClicked() );
    } );
  
    $( '.timeline .off .arrow' ).each( function() {
      $( this ).click( _timelineOffClicked() );
    } );
  }
  </code></pre>
  
  <p>Solution :</p>
  
  <pre><code>var _timelineLeft = null;
  
  function _timelineOnClicked()
  {
    return function()
    {
      $( '.timeline .on' ).fadeOut();
      $( '.timeline .off' ).fadeIn();
  
      $( '.timeline .image' ).css( 'left', _timelineLeft );
    }
  }
  
  function _timelineOffClicked()
  {
    return function()
    {
      $( '.timeline .off' ).fadeOut();
      $( '.timeline .on' ).fadeIn();
  
      $( '.timeline .image' ).css( 'left', _timelineLeft );
    }
  }    
  
  function _timelineSynchronize()
  {
    return function( event, ui )
    {
      _timelineLeft = ui.position.left;
    }
  }
  
  function _timelineInitialize()
  {    
    $( '.timeline .off .image' ).draggable( {
        axis : 'x',
        containment: [ 1280 - 1613, 0, 0, 0 ]
        drag : _timelineSynchronize()
      } );
  
    $( '.timeline .on .image' ).draggable( {
        axis : 'x',
        containment: [ 1280 - 1613, 0, 0, 0 ],
        drag : _timelineSynchronize()
    } );
  
    _timelineLeft = $( '.timeline .image' ).css( 'left' );
  
    $( '.timeline .on .arrow' ).each( function() {
      $( this ).click( _timelineOnClicked() );
    } );
  
    $( '.timeline .off .arrow' ).each( function() {
      $( this ).click( _timelineOffClicked() );
    } );
  }
  </code></pre>
  
  <p>Thanks</p>