jQuery UI - 如何恢复拖放的可拖动对象答案

【问题标题】：jQuery UI - how to restore the dropped draggablejQuery UI - 如何恢复拖放的可拖动对象
【发布时间】：2012-01-16 15:00:58
【问题描述】：

我有 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 时将其恢复到“可拖动” Div 中的原始位置。我不确定是在可拖动元素上还是在函数内使用辅助克隆以某种方式附加到“可拖动”Div。有人有建议吗？有没有像ui.draggable.restore();这样的方法可以使用？

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

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

【讨论】：

我正在将它与我的可拖动对象一起使用，你建议我如何再次使用它？
如果您将revert设置为true，则元素将在放置后恢复到原来的位置。
但是我认为只有当可拖动对象没有被拖放到可放置对象上时才会发生还原？我可能会在这里感到困惑
好吧，当您将其设置为有效或真实时，我会说可能会恢复。但是，当您将它们从 dom 中删除时，它们就再也没有机会恢复了 ;)
只有在没有被放置在有效的可放置对象上时才会恢复。

【解决方案2】：

除了图像不想成为可放置的事实之外，脚本似乎可以工作......

看到这个JSFiddle。

【讨论】：

【解决方案3】：

这是我在项目中采用的一小段代码。

HTML：

<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;
    }

    }
    });
});

希望对你有帮助..

【讨论】：

【解决方案4】：

helper：“克隆”是要走的路，当您决定是否将其从原始位置删除时，您只需使用 .remove() 将其删除

【讨论】：