1

jQuery UI を使用して、オブジェクトのクローンをドロップ可能なスペースにドラッグしています。ただし、ドロップposition: relative可能なスペースがスクロールし、ドロップされた要素をスクロールする必要があるため、ドロップ可能なスペースにプロパティが必要です。ただし、クローンをドロップすると、ドロップした場所にとどまるのではなく、右下にジャンプします。どうすればこれと戦うことができますか？

ここに私の問題を示すフィドルがあります: http://jsfiddle.net/nEN7h/42/

編集:私のコメントに基づいて更新されました。

4

2 に答える 2

3

これを試して

$(".canvas").droppable({
    accept: '.to_drag',
    drop: function(event, ui) {
        var clone = $(ui.helper).clone();
        var parent = $('.canvas.ui-droppable');

        $(this).append(clone);
        var leftAdjust = clone.position().left - parent.offset().left;
        var topAdjust = clone.position().top - parent.offset().top;
        clone.css({left: leftAdjust, top: topAdjust});

    }
});

基本的には、droppableを相対的なdivで囲むと、droppableで囲まれた要素は、親のオフセット位置を不必要に追加することになります。したがって、dropコールバック関数で余分なオフセットを削除するだけです。

上記のコードを理解するための鍵となる.offset （）と.position（ ）の違いに細心の注意を払ってください。

注： 私はjsfiddleを使用してみましたが、jsfiddleはポジショニングを少しいじっています。ブラウザだけで試してみてください。動作するはずです。

于 2013-02-19T19:38:29.187 に答える
0

ここに解決策がありますが、それがそれである場合、あなたが探しているものかどうかはわかりません。

次の行を置き換えます。

$(this).append($(ui.helper).clone());

これで：

$('<div class="to_drag"></div>').appendTo(this);

ui.helper を使用しない場合は機能します。

于 2013-02-19T18:35:51.323 に答える