如何在 AJAX 请求失败时恢复“可拖动”？答案

【问题标题】：How can I revert a 'draggable' upon failed AJAX request?如何在 AJAX 请求失败时恢复“可拖动”？
【发布时间】：2009-08-31 13:18:11
【问题描述】：

我有一个可拖动的 div，需要将其拖放到 droppable 上。如果它被正确删除，则 droppable 会调用 AJAX 请求。如果可拖动对象没有有效的 id 或 AJAX 请求失败，则应将可拖动对象恢复到其原始位置。 jQuery可以做到这一点吗？！

非常感谢任何帮助！

$("div.draggable").livequery(function(){
   $(this).draggable({
      revert: 'invalid',
      distance: 20
   })
});

$("#trash").droppable({
   tolerance: 'touch',
   drop: function(event, ui) 
   {    
      var item = ui.draggable;
      var id = item.attr('id');

      if (id) 
      {
         $.ajax( 
         {
            type: "POST",
            url: "delete.php",
            data: "id=" + id,
            success: function(html)
            { 
               if (html) 
               {
                  item.remove();
               } 
               else
               {
                  // FAILED AFTER AJAX
                  // is it possible to revert the draggable from here??
               } 
            }
         });            
      }
      else
      {
         // FAILED BEFORE AJAX
         // is it possible to revert the draggable from here??
      }
}
});

【问题讨论】：

标签： php jquery jquery-ui drag-and-drop

【解决方案1】：

我遇到了同样的问题，

你可以这样做：

item.css({"top":0, "left":0});

提示：可拖动具有相对位置。

【讨论】：

有点骇人听闻，但效果很好。有人会怀疑 revert 属性可能会绑定到函数调用，但它确实如此。

【解决方案2】：

我对 jquery 不太熟悉 - 但我建议使用原型框架（以及 scriptaculous） - 在原型中你肯定可以实现这个效果。

【讨论】：

【解决方案3】：

如果您能猜到它在失败块中的原始位置，只需使用选择器找到它，并使用操作函数将其从当前位置移除并移动到旧位置。

如果需要，也许可以在拖动时存储原始位置（父子索引），然后在失败时将其移回原处

【讨论】：