0

私は次のことをしようとしています: ページにアイコンがあり、それをドラッグするとアイコンが変わります。封じ込めエリアを超えてはなりません。

私が試したことは次のようなものです：

$("#myElement").draggalble({
    containment: "#myContainer",
    start: function(event, ui) {
        $(this).attr("width", "20");
        $(this).attr("height", "20");
        $(this).attr("src", "newSource.png");
    }
});

アイコンが正常に変更され、ドラッグできるようになりました。唯一の問題は、新しいアイコン サイズです。オリジナルより少し小さめです。コンテナの境界近くにドラッグすると、停止が早すぎて、コンテナの境界に到達できません。具体的には、上と右の境界には到達できませんが、下と左の境界には到達できます。これは、ドラッグ可能なプラグインが古いアイコンのサイズを使用してアイコンの制限を計算するためだと思います。

新しいアイコンをドラッグしてコンテナの境界に到達する方法について誰かアドバイスがありますか?

前もって感謝します ：）

4

1 に答える 1

1

これを機能させるには、小さい画像の寸法に基づいてコンテナー オブジェクトを作成する必要がありました。

次のオプションを使用 - パラメータは、それぞれコンテナ div、小さい画像の幅、小さい画像の高さです。

 containment: shrinkSize("#container",20,20),

関数は次のことを行います。

function shrinkSize(frameId, smallerWidth, smallerHeight) {
    var frameOffset = $(frameId).offset(),
        frameHeight = $(frameId).height()-smallerWidth,
        frameWidth = $(frameId).width()-smallerHeight;

    return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]);
}

ここでフィドル。

PSフィドルでは、ドラッグされている画像をドロップすると元のサイズに戻ります。これが意図した動作でない場合は、定義stopからオプション (関数付き) を削除してください。draggable

于 2012-12-18T14:58:43.987 に答える