3

画像をdivにネストして、このdiv内のX軸上でドラッグできるようにしようとしています。

これが私のポイントを説明するためのjsFiddleです

ユーザーが左/右の端に到達したら、青いボックスのドラッグを停止したいのですが、赤いラッパーは表示されなくなります。

青いボックスが非常に幅の広い画像であると想像してください。幅を超えずに左側から右側にドラッグできるようにしたいと思います。つまり、左端に達したときに右にドラッグすることはできず、右側に達したときに左にドラッグすることもできません。

一言で言えば、画像の端に到達すると、それ以上ドラッグすることはできません。

どうすればそのような動作を設定できますか？

遊んでみましcontainmentたが、思い通りにいきませんでした。

ご協力いただきありがとうございます。

HTML：

<div id="wrapper">
    <p id="timeline"><img src="" alt="Timeline" width="2000" height="400"/></p>    
</div>

CSS：

#wrapper {
    width: 800px;
    height: 400px;
    background-color : red;
    overflow: hidden;
    cursor: w-resize;
}

#timeline {
    width: 2000px;
    height: 400px;
    margin: 0 auto;
    background-color: blue;
}

JS：

$("#timeline").draggable({
    axis: "x"
});
4

1 に答える 1

2

このオプションを使用するのは正しいのですがcontainment、座標の配列を渡してを制約する必要がありますdraggable。

jQuery UIのドキュメントによると、containmentオプションは形式の配列を取ることができます[x1, y1, x2, y2]。あなたの場合、すでにdraggablex軸に制約しているため、y値は関係ありません。したがって、単純に0を渡すことができます。

x値の場合、画像はすでに右端から始まっているため、x1では0が機能します。x2の場合、以下を使用する必要があります。

(width of parent - width of image)

それで

(800 - 2000) = -1200

containmentしたがって、オプションとして次のものを渡すことができます。

containment: [-1200, 0, 0, 0]

実例-http ://jsfiddle.net/LMXLj/

于 2012-06-07T02:11:29.933 に答える