4

PHP プロジェクトのカバー画像を作成しています。Facebookのようにしたいのですが、目的のカバーサイズよりも大きいサイズのカバーをアップロードできるようにしたいのですが、カバーを上下左右にドラッグして、ユーザーが自分に合わせて配置し、設定できるようにしたいと考えています。この動きで写真をドラッグできますが、画像が終了したらドラッグを止めたいです。ユーザーが画像を左にドラッグしているように、div の終点が div の終点と一致する場合、画像は自動的にドラッグを停止する必要があります。これを説明する適切な文が得られません。白い背景を表示したくないので、私が望んでいるものを表示するフィドルをアップロードしています (この文で例を説明できます)。

デモ フィドル: http://jsfiddle.net/keshu/HC927/1/

$(document).ready(function(){
    $( ".cover_image" ).draggable();
});
4

1 に答える 1

5

オプションとチェックを使用してcontainment、画像を境界内に保持すると、次のことが可能になります。

指定された要素または領域の境界内へのドラッグを制限します。

複数のタイプがサポートされています:

Selector : ドラッグ可能な要素は、セレクターによって見つかった最初の要素の境界ボックスに含まれます。要素が見つからない場合、包含は設定されません。

Element : ドラッグ可能な要素は、この要素の境界ボックスに含まれます。文字列: 可能な値: "parent"、"document"、"window"。

Array : [ x1, y1, x2, y2 ] の形式でバウンディング ボックスを定義する配列。

コード：

$(document).ready(function () {
    $(".cover_image").draggable({
        containment: [
        $(window).width() - $(".cover_image").width(),
        $(window).height() - $(".cover_image").height(),
        0,
        0]
    });
});

デモ: http://jsfiddle.net/8ZBPA/

于 2013-09-23T13:13:01.303 に答える