jQuery UI-如何恢复已删除的可拖动文件

我有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();

            });
        }

    });

});

A.
B
C
$（函数（）{
//拖拉。。。
$（“#d1，#d2，#d3”）。可拖动({
回复：“无效”
});
$（“#垃圾”）。可拖放({
activeClass:“不透明”，
drop：函数（事件、用户界面）{
ui.draggable.fadeOut（函数（）{
ui.draggable.remove（）；
});
}
});
});

我还将activeClass应用于垃圾桶的图像，以便用户意识到他们可以拖动/该功能处于活动状态。但是，我想扩展我的代码，这样当删除一个Div时，它会恢复到“draggables”Div中的原始位置。我不确定是在draggable元素上使用辅助克隆，还是在函数中以某种方式附加到“draggables”Div中。有人有什么建议吗？是否有这样的方法：

ui.draggable.restore（）我可以使用吗

如果我的措辞不好，请让我知道，我将重新安排问题的阶段。
我想您正在寻找
恢复
选项：

帮助程序：“克隆”是一种方法，当您决定是否从原始位置删除它时，您只需使用.remove（）将其删除即可。
除了图像不希望成为可拖放图像之外，脚本似乎还可以工作

看看这个。
这里是我在项目中采用的一些代码

Html:

我希望这会有所帮助。
我正在将其用于我的可拖放设备，您建议我如何再次使用它？如果将“还原”设置为true，元素将在拖放后还原到其原始位置。但是我认为只有在未将可拖放设备拖放到可拖放设备上时，才会发生还原？我可能会在这里感到困惑，我想说，当你将其设置为有效或真实时，可能会恢复。但是当您将它们从dom中删除时，它们就再也没有机会恢复；）只有在未将其放置在有效的可拖放设备上时，才会恢复。
<div class="N_COn_USER" name="moh1234"> 
<img class="delople" src="_files/us.png" />
</div>

<div class="N_COn_USER" name="demo1234"> 
<img class="delople" src="_files/us.png" />
</div>

<div class="N_COn_USER" name="foo1234"> 
<img class="delople" src="_files/us.png" />
</div>

  $(document).ready(function() {

    var id ;
    id = $(".N_COn_USER").draggable({    // the draggable div
    revert: true,
    helper: "clone",
    start: function(event, ui) {
    id = $(this).attr("name");  // we name each draggable item with its ID or any unique identifier. And here, we grab that value ..
    }
}).attr("name");

    $("#dropable_file").droppable({
    tolerance: 'touch',
    drop: function() { 

    var agree=confirm('Permantly delete '+ id2 +"?");
    if (agree) {
        $.ajax({
        url: 'unfollow',
        data: 'u=' + id,   // we send that ID to a processing page controller 
        type: 'post',
        success: function(msg){
            if(msg == 'bad') // Message Sent, check and redirect
            {                // and direct to the success page
            $("#msgbox").html('').addClass('good');
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            {
                //add message and change the class of the box and start fading
                $(this).html('Tcxfgg').removeClass().addClass('error').fadeTo(300,1); // if not deleted, show an error!

            });    
            }
            else  // if everything went perfectly 
            {
            $("div[name="+id+"]").fadeOut("slow");  // the item with that unique name gets faded out on success. 
            $("span[name="+id+"]").fadeOut("slow"); // picture of it also should have its own name if it lives outside that DIV.


            }
        }
        });

    } else {
        return false;
    }

    }
    });
});