2

サイトへのリンクは次のとおりです。戦争ゲームマップ

大きなjQueryドラッグ可能div（マップイメージが背景として設定されている）が、overflow：hiddenがある小さなdiv内にあります。重要なのは、maps.google.comのようにユーザーが地図をドラッグできるようにすることです。

Googleマップには水平方向にループする地図がありますが、私の地図は太平洋の両端で止まります。現在のように、ユーザーは地図を両側にドラッグしすぎると、赤い背景が左側または右側に表示され始めます。

赤い背景が表示され始める前に、マップの端が表示されたときにjQueryを使用してドラッグを停止するにはどうすればよいですか？

（現在、地図は地獄のように醜いですが、作成中です。）

Css：

body {

overflow:hidden;
background-color: #ff0000;

}

#theBody {

position: absolute;
top: 50px;
left: 0px;
width: 1px;
height: 1px;
overflow: hidden;

}

#draggable {

background-image: url(map.gif);
width: 3944px;
height: 2258px;

}

jQuery：

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

viewportHeight = (viewportHeight - 50);

$('#theBody').css({'width': viewportWidth});
$('#theBody').css({'height': viewportHeight});

$('#draggable').draggable();

HTML

<div id="theBody">

    <div id="draggable" class="ui-widget-content"></div>

</div>
4

1 に答える 1

1

draggablejquery-uiの機能は、ドラッグされたアイテムの動きを制限するコンテナを定義する可能性を提供します。ドラッガブルを初期化するときにパラメーターを設定containmentすることで、目的の目標を達成できます。あなたの場合、使用する必要があります

$('#draggable').draggable({containment:"#theBody"});

詳細については、こちらをご覧ください。

コンテインメント エリアよりも大きなドラッグ可能オブジェクトを作成するには、次のトリックを使用できます。

  1. viewContainerコンテナに必要なサイズ (たとえば 300x300) の div を作成します。overflow:hidden
  2. この div に追加するdraggableContainerと、ドラッグ可能な意味で実際のコンテナーになります。この 2 番目の div は、ドラッグ可能要素を含めるのに十分な大きさである必要があります。
  3. これにドラッグ可能を追加します。たとえばdraggableContainer、500x500draggableとしましょう
  4. 他の 2 つのサイズに合わせて、 のサイズと位置を調整しdraggableContainerます。この場合、全体でパンできるようにするには、オフセットを付けるdraggable必要があります。700x700-200x-200

ここで完全な動作例を見ることができます。

于 2013-01-14T13:11:35.810 に答える