Question

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

此时间线有两种视觉状态（打开和关闭），用户可以将其拖动到左侧和右侧。

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

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

由于

Answer 1

嗯，你正在寻找类似的东西：

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

将所有.timeline .image元素设置为当前拖动元素的位置。它使用jQueryUI as mentioned in the docs准备的ui对象。确保缓存该选择器的结果（实际上不要在_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
  } );

您正在调用该函数，而不是传递对它的引用（作为回调），因此在拖动元素时它将无效。

同步两个可拖动元素的位置

1 个答案: