2

我正在使用可拖动的时间线开发交互式应用程序。

这条时间线有两种视觉状态（打开和关闭），用户可以左右拖动。

当用户切换视觉状态时，应用程序需要显示相同的时间线部分。

HTML部分：

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

我只想拖动图像子元素而不是整个时间线元素。

jQuery部分：

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

解决方案 ：

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

谢谢

4

1 回答 1

1

好吧，您正在寻找类似的东西：

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

这会将所有.timeline .image元素设置为当前拖动元素的位置。它使用文档中提到ui的 jQueryUI 准备的对象。确保缓存该选择器的结果（实际上不要在 中运行它）。_timelineSynchronize

您还需要修复

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

读书： 

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

您正在调用该函数，而不是传递对它的引用（作为回调），因此当您拖动元素时它不会产生任何影响。

于 2012-06-08T15:01:00.510 回答