jQuery UI - 如何恢复删除的可拖动对象

Question

我有 3 个 Div，可以将它们拖到垃圾桶的图像中。一旦用户释放鼠标，Div 就会被删除，否则它将恢复到其原始位置，这是我的代码:

<div id="draggables">
    <div id="d1">
        <header>A</header>
    </div>
    <div id="d2">
        <header>B</header>
    </div>
    <div id="d3">
        <header>C</header>
    </div>
</div>


<img src="trash.jpg" id="trash" class="semitransparent" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script>

$(function(){
    // draggables...

    $("#d1,#d2,#d3").draggable({
        revert:"invalid"
    });

    $("#trash").droppable({

        activeClass:"opaque",
        drop: function(event, ui){

            ui.draggable.fadeOut(function(){
                ui.draggable.remove();

            });
        }

    });

});

我还将 activeClass 应用于垃圾桶的图像，以便用户意识到他们可以拖动/功能处于事件状态。不过，我想扩展我的代码，以便当 Div 被删除时，它会恢复到“draggables”Div 中的原始位置。我不确定是否在可拖动元素上使用辅助克隆，或者在函数中以某种方式附加到“可拖动”Div。有人有建议吗？有没有类似的方法:ui.draggable.restore();我可以使用？

如果我的措辞不好，请告诉我，我会重新提出问题。

Answer 1

我认为您正在寻找恢复选项:
http://jqueryui.com/demos/draggable/#option-revert