2

ドラッグ可能なタイムラインを使用してインタラクティブなアプリケーションに取り組んでいます。

このタイムラインには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 に答える