Javascript 同步两个可拖动元件的位置

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

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

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

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>

解决方案：

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

---

谢谢

好吧，您正在寻找类似于：

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

将所有

.timeline.image

元素设置为当前拖动元素的位置。它使用jQueryUI准备的

ui

对象。确保缓存该选择器的结果（不要在

\u 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
  } );

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

我删除了“拖动：_timelineSynchronize（'.timeline.image.on'）”和“拖动：_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
  } );