Question

I’m working on an interactive application using a draggable time-line.

This time-line have two visual states (open and closed) and the users can drag it on the left and the right.

When a user toggles visual states, the application need to display the same time-line part.

HTML part :

<div class="timeline">
  <div class="on">
    <div class="group">
      <div class="image">
        <div class="fr">
        </div>
        <div class="en">
        </div>
      </div>
      <div class="arrow left">
      </div>
      <div class="arrow right">
      </div>          
    </div>
  </div>
  <div class="off">
    <div class="group">
      <div class="image">
      </div>
      <div class="arrow left">
      </div>
      <div class="arrow right">
      </div>
    </div>
  </div>
</div>

I just want to drag image sub-elements and not the whole timeline element.

jQuery part:

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() );
  } );
}

Solution :

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() );
  } );
}

Thanks

Answer 1

Well, you’re looking for something like:

function _timelineSynchronize (ev, ui)  {
    $('.timeline .image').css('left', ui.offset.left);
}

Which will set all .timeline .image elements to the position of the currently dragged element. It uses the ui object prepared by jQueryUI as mentioned in the docs. Make sure that you cache the result of that selector (don’t actually run it in _timelineSynchronize).

---

You’ll also need to fix

  $( '.timeline .off .image' ).draggable( {
      axis : 'x',
      containment: [ 1280 - 1613, 0, 0, 0 ],
      drag: _timelineSynchronize( '.timeline .image .on' )
    } );

  $( '.timeline .on .image' ).draggable( {
      axis : 'x',
      containment: [ 1280 - 1613, 0, 0, 0 ],
      drag: _timelineSynchronize( '.timeline .image .off' )
  } );

to read:

  $( '.timeline .off .image' ).draggable( {
      axis : 'x',
      containment: [ 1280 - 1613, 0, 0, 0 ],
      drag: _timelineSynchronize // don't invoke the callback
    } );

  $( '.timeline .on .image' ).draggable( {
      axis : 'x',
      containment: [ 1280 - 1613, 0, 0, 0 ],
      drag: _timelineSynchronize // don't invoke the callback
  } );

You were calling the function, rather than passing a reference to it (as a callback), so it would have no effect when you dragged the elements.