web-dev-qa-db-ja.com

JQuery-UIドラッグ可能リセットを元の位置に

これはおそらく非常に簡単ですが、私はいつも複雑すぎると思います。

固定の幅/高さ+ float：leftで#draggable /＃droppableを使用して簡単なテストを設定しました。

次に、リセットボタンを使用して、＃droppableにスナップした後、＃draggableを元の状態にリセットできるようにします。 （ボトムライン）

$(document).ready(function() {

    $("#draggable").draggable
    ({  
        revert: 'invalid',
        snap: '#droppable',
        snapMode: 'corner',
        snapTolerance: '22'

    });
});

    $("#droppable").droppable
    ({
        accept: '#draggable', 
        drop: function(event, ui) 
        {
            $(this).find("#draggable").html();
        }
});

    $(".reset").click(function() {
    /* What do I put here to reset the #draggable to it's original position before the snap */
});
jquery-uidraggabledroppable
13
user2110966

ドラッグ可能なアイテムは、私が知っている元の位置を追跡しません。ドラッグ中のみ、スナップバックされます。ただし、これは自分で行うことができます。

$("#draggable").data({
    'originalLeft': $("#draggable").css('left'),
    'origionalTop': $("#draggable").css('top')
});

$(".reset").click(function() {
    $("#draggable").css({
        'left': $("#draggable").data('originalLeft'),
        'top': $("#draggable").data('origionalTop')
    });
});

http://jsfiddle.net/ExplosionPIlls/wSLJC/

11
Explosion Pills

私はこれをプロジェクトで使用しました

$("#reset").click(function () {
    $(".draggable-item").animate({
        top: "0px",
        left: "0px"
    });
});

私のためにトリックをしました

17
craig

私は次のことで大成功を収めました。

$(".draggable-item").removeAttr("style");
5
h0dges

以下が元の位置にリセットする最も簡単な方法であることがわかりましたが、アイテムをドラッグしたままにしたい場合、これは単独では機能しません

$(".draggable-item").removeAttr('style');

これにより、元の位置にリセットしてアイテムをドラッグ可能に保つことができました。

$("#reset").click(function () {
    // Reset position
    $(".draggable-item").removeAttr('style');

    // Destroy original draggable and create new one
    $(".draggable-item").draggable("destroy");
    $(".draggable-item").draggable();
});
1
ScottyG

私はh0dgesの基本的な考え方を使用しました。作成したボールは元の位置に戻りましたが、ボールにするスタイルを失いました。したがって、ボールのスタイルを保持し、上下のスタイルをリセットして元の位置に戻しました。

function endRound() {
   $(".ball").css({"top":"", "left":""});
}
1
Yoko Ishioka