0

境界線を使用してドラッグ可能な画像の効果を作成しようとしています。ええと、私は固定幅で可変高さの画像を持っています。私は次のコードを持っています：

<div class="image_holder">
   <div class="image_content"></div>
</div>

「image_holder」は、画像の表示領域をマスクとして設定し、その幅= 180ピクセル、高さ= 90ピクセル、オーバーフロー=非表示のプロパティを設定します。

画像を「image_content」にロードすると、通常、高さは高くなりますが、マスクされ、「image_holder」の領域のみが表示されます。

問題は、jqueryドラッグ可能関数を使用すると、正常に機能しますが、境界を設定する必要があるということです。私は次のコードを使用します：

$("#draggable").draggable({axis: 'y', containment: [0, $('.image_holder').offset().top-excess, 180, $('.image_holder').offset().top+90+excess], cursor: "crosshair"});

'excess'は、以下からの計算です。

var excess = $('#draggable').height() - 90;

私の問題は、画像が表示領域を離れずに画像をドラッグするための包含領域を適切に区切ることができないことです。

どんな助けでもいただければ幸いです。

4

1 に答える 1

1

私が正しく理解していれば; これは、次のようにドラッグ イベントを監視することで実現できます。

$('img').draggable({
    axis: 'y',
    drag: function(event, ui) {
        var pos = ui.position;
        var $this = $(this);

        if((pos.top * -1) >= ($this.height() - $this.parent().height()))
        {
            return false;
        }

        if(pos.top > 0)
        {
            return false;
        }
    }
});

基本的に、画像がコンテナの境界の外に出ようとしている場合は、単に戻りますfalse

デモをドラッグ

于 2012-06-01T12:20:44.977 に答える