3

topドラッグ可能オブジェクトがドロップされるか元に戻るたびに、css の位置が約 10px ずつ増加します。例えば、

初めてリンゴを .sidebox から .dropbox にドラッグすると、リンゴは次のようになります。

<div class="apple ui-draggable selected" style="position: relative; left: 0px; top: 10.1px;"></div>

2 回目は、apple を .dropbox から .sidebox にドラッグして戻すか、少し動かして元に戻します。apple は次のようになり、音符topが 10 増加します。

<div class="apple ui-draggable selected" style="position: relative; left: 0px; top: 20.1px;"></div>

ドラッグ アンド ドロップを繰り返すと、topどんどん大きくなります。

<div class="apple ui-draggable selected" style="position: relative; left: 0px; top: 30.1px;"></div>
...

そのため、私の愛するリンゴは、ページにさよならを言うまで、私が望む位置から離れて漂っています. これは何が原因ですか？

簡略化されたコード:

    // drag and drop
    $( ".apple" ).draggable({ 
        revert:true
    });

    $( ".dropbox" ).droppable({
        drop: handleDropbox
    });

    $( ".sidebox" ).droppable({
        drop: handleSidebox
    });

    function handleDropbox(event, ui) {
        $(this).append(ui.draggable);
        $(this).droppable( 'disable' );
    }

    function handleSidebox(event, ui) {
       ui.draggable.parent().droppable('option', {'disabled':false});
       $(this).children('h4').after(ui.draggable); 
    }

編集: jsfiddle で複製できません。理由がわかりません..

.sidebox位置が固定されていることに注意してください。

4

3 に答える 3

0

フィドルをチェックしてください

http://jsfiddle.net/4gFqh/7/

$( ".apple" ).draggable({ 
    revert:function(event,ui){  
        s=s+10;
        alert("my top position is "+s);
        $(this).data("draggable").originalPosition = {
                          top:s,
                          left:0
                                         };
                    return !event;
                             },
});
于 2013-05-31T12:03:11.357 に答える
0

JQueryを使用してもまったく同じ問題がありました。私のアイテムが元に戻るときはいつでも、ゆっくりとページを滑り落ちていました. 何度もドラッグして離すと、要素は最終的に画面から「元に戻る」ことになります。私の解決策は、開始位置を記録し、その後 css プロパティをリセットすることでした。私のコードは私の実際のプロジェクトでは長いので、例を示します（この8年前のトピックに出くわした後に機能したことがわかった最も迅速な修正です。）ところで-別の回答に示されている実際の復帰は、常に同じにドラッグ可能を返すとは限りません場所 (それ以外の場合は問題ありません) - これはおそらく国境のせいだと思いますか? 正直なところわかりません。

$("myElement").draggable({
    start: function(event, ui){ startPos = $(this).position();},
    stop: function(event, ui){
        $(this).css("top", startPos.top);
        $(this).css("left", startPos.left);
    }
});

これが誰かに役立つことを願っています...それが私にとってうまくいったことを知ってください:)

于 2021-09-01T13:38:31.963 に答える