0

I have an image and I have to move the image upwards and downwards, I am using jquery ui draggable containment option, but its not working as expected

<img style="margin-top:200px;" id='img' src='https://www.google.com/images/srpr/logo11w.png' />

$( "#img" ).draggable({containment: [0, 100, 0, 100] });

demo : http://jsfiddle.net/m3e6V/3/

4

1 に答える 1

0

コードで行っているのは、画像を制限するボックスを定義することです。これは、左上のポイント (0,100) から右下のポイント (0,100) に及ぶため、基本的に画像が後に移動することを許可していません。 (0,100) にジャンプします。

これを行う最も簡単な方法は、( CSS を介して) 必要なサイズに設定された親要素を定義axis: "y"し、垂直方向にのみ移動containment: "parent"してそこに保持するように定義することです。

まとめ：

<div style="height: 300px; width: 100%;">
  <img id="img" src="https://www.google.com/images/srpr/logo11w.png' />
</div>

そして、JS

$( "#img" ).draggable({axis: "y", containment: "parent" });

ライブデモ：jsFiddle

更新:要素の先頭から画像を開始しないようにする必要がある場合は、画像要素.draggable()にインライン CSS を追加するのと同じ方法で位置を調整できposition:relative; top: 100px;ます。

更新されたデモ: jsFiddle

于 2013-11-14T09:59:20.817 に答える