2

日付ピッカーのUIコントロールをドラッグ可能にする方法を知っています。水平方向の変位量を制限するのに苦労しています。

言葉で説明するのは難しいです。これが私が達成しようとしていることです。

これが結果です。

日付ピッカーを水平方向にドラッグする方法に注意してください。私はほしくない：

ここに画像の説明を入力してください

そのギャップは0より大きくなります。カレンダーが常に表示されるように、日付ピッカーの右側に同じ動作をしたいと思います。現在、左にドラッグするとカレンダーを非表示にすることができます。一方、右にドラッグすると非表示にできません。先月は見えませんが、画面が小さすぎる場合。

この問題を解決するには、どのようなアプローチを取る必要がありますか？

ここに画像の説明を入力してください ここに画像の説明を入力してください

4

1 に答える 1

1

Draggableは、いくつかのイベント（start、drag、stop）を発生させます。これらのイベントはすべて、ドラッグされた要素の位置とオフセットを含む2番目の引数としてヘルパーオブジェクトを提供します。

  • ui.position-オフセット要素を基準とした、{top、left}オブジェクトとしてのヘルパーの現在の位置
  • ui.offset-ページを基準とした、{top、left}オブジェクトとしてのヘルパーの現在の絶対位置

私の解決策は、ドラッグが停止しているときにドラッグされた要素が左側にドラッグされすぎたときに、コンテナの端をアニメーション化することです。

$("#draggable2").draggable({
    axis: "x",
    ...
    stop: function(e, ui) {
        if (ui.offset.left > 0) {
            $(this).animate({
                'left': (ui.position.left - ui.offset.left) + 'px'
            }, 250);
        }
    },
    containment: $("#draggableParent")
});​

DEMO
DEMO（フルスクリーン）

右にドラッグしても同じ結果が得られるように、簡単に少し掘り下げることができると思います。

于 2012-06-07T07:28:13.963 に答える