5

ページには、プロパティを持つドラッグアンドドロップ可能な要素がいくつかありacceptます。

現在、私のコードは次のように設定されています。

$(".answer." + answer).draggable({
    revert: "invalid"
    , snap: ".graph"
});
$(".graph." + graph).droppable({
    accept: ".answer." + answer
});

したがって、答えが正しくない場合は、元の位置に戻ります。

ユーザーは、ページ上のすべてをリセットする機能も必要です。次のことを試しましたが、うまくいきません。

$("btnReset").click(function(){
   $(".graph.A").draggable({revert:true});
});
4

1 に答える 1

12

必要なことを行うための組み込みメソッドがないため、元に戻す動作を自分でシミュレートする必要があります。ドラッグ可能な各要素の元の位置を保存し、リセット ボタンをクリックすると、元の位置に戻すことができます。

単純化されたjsFiddle の例を次に示します。

jQuery:

$("#draggable").draggable({
    revert: "invalid"
});
$("#draggable2").draggable({
    revert: "invalid"
});
$("#droppable").droppable({
});
$("#btnReset").click(function() {
    $("#draggable, #draggable2").animate({
        "left": $("#draggable").data("left"),
        "top": $("#draggable").data("top")
    });
});
$(".ui-widget-content").data("left", $(".ui-widget-content").position().left).data("top", $(".ui-widget-content").position().top);

HTML:

<div id="draggable" class="ui-widget-content">
    <p>I revert when I'm dropped</p>
</div>
<div id="draggable2" class="ui-widget-content">
    <p>I revert when I'm dropped</p>
</div>
<button id="btnReset">Reset</button>
<div id="droppable" class="ui-widget-header">
    <p>Drop me here</p>
</div>​
于 2012-04-04T16:13:47.490 に答える