5

Вопрос по revert, jquery-ui-droppable, jquery-ui-draggable, jquery – jQuery.draggable () - вернуться по нажатию кнопки

У меня есть несколькоперетаскиваемый & Амп;Droppable элементы на моей странице, которые имеютaccept свойства.

В настоящее время мой код настроен так:

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

Следовательно, если ответ не верен, он возвращается в исходное положение.

Пользователю также нужна возможность сброса всего на странице. Я пробовал следующее, но это не работает:

$("btnReset").click(function(){
   $(".graph.A").draggable({revert:true});
});
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded$("#draggable").attr("data-left", $("#draggable).css("left"))

    от Curt
  • 10

    Поскольку нет встроенного метода для того

    чтобы делать то, что вам нужно, вам придется самостоятельно смоделировать поведение возврата. Вы можете сохранить исходную позицию каждого перетаскиваемого элемента, а затем, нажав кнопку сброса, анимировать их обратно в эти позиции.

    Вот упрощенныйПример 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>​