14

これはおそらく非常に簡単に行うことができますが、私はいつも複雑すぎると考えています.

#draggable / #droppable で幅/高さ + float:left を固定して簡単なテストをセットアップしました。

次に、#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 */
});
4

6 に答える 6

20

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

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

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

于 2014-02-16T13:49:40.143 に答える
12

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

$("#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/

于 2013-03-04T02:38:08.000 に答える
6

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

$(".draggable-item").removeAttr("style");
于 2016-11-15T15:19:34.513 に答える
2

h0dges の基本的なアイデアを使用しました。作成したボールは元の位置に戻りましたが、ボールになったスタイルを失いました。したがって、ボールのスタイルを維持し、上と左のスタイルをリセットして元の位置に戻します。

function endRound() {
   $(".ball").css({"top":"", "left":""});
}
于 2016-11-18T12:50:15.270 に答える