在jQuery中，如何在ajax调用失败时恢复Dragable？

如果drop上的ajax调用返回失败，我希望DRAGABLE恢复到其原始位置。这是我想象中的代码。。在ajax调用过程中，如果Dragable停留在Dropable中，这是可以的

<script type="text/javascript">
jQuery(document).ready($){
    $("#dragMe").draggable();
    $("#dropHere").droppable({
        drop: function(){
            // make ajax call here. check if it returns success.
            // make draggable to return to its old position on failure.
        }
    });
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>

jQuery（文档）.ready（$）{
$（“#dragMe”）.draggable（）；
$（“#dropHere”）。可拖放({
drop:function（）{
//在这里进行ajax调用。检查它是否返回成功。
//使Dragable在发生故障时返回到原来的位置。
}
});
}
德拉格姆
滴落

尝试保存原始位置，然后再开始拖动，如果拖放失败，则恢复原始位置。可以按如下方式保存原始位置：

var dragposition = '';

$('#divdrag').draggable({
   // options...
   start: function(event,ui){
      dragposition = ui.position;
   }
});

$("#dropHere").droppable({
   drop: function(){
       $.ajax({
           url: 'myurl.php',
           data: 'html',
           async: true,
           error: function(){
               $('#divdrag').css({
                  'left': dragposition.left,
                  'top': dragposition.top
               });
           }
       });
   }
});

---

谢谢你的重播@Fran Verona

我是这样解决的：

<script type="text/javascript">
jQuery(document).ready($){
    $("#dragMe").draggable({
        start: function(){
        $(this).data("origPosition",$(this).position());
        }
    });
    $("#dropHere").droppable({
        drop: function(){
            //make ajax call or whatever validation here. check if it returns success.
            //returns result = true/false for success/failure;

            if(!result){ //failed
                ui.draggable.animate(ui.draggable.data().origPosition,"slow");
                return;
            }
            //handling for success..
        }
    });
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>

jQuery（文档）.ready（$）{
美元（“#dragMe”）。可拖动({
开始：函数（）{
$（this.data（“origPosition”，$（this.position（））；
}
});
$（“#dropHere”）。可拖放({
drop:function（）{
//在这里进行ajax调用或任何验证。检查它是否返回成功。
//对于成功/失败，返回结果=真/假；
如果（！result）{//失败
ui.draggable.animate（ui.draggable.data（）.origPosition，“slow”）；
返回；
}
//成功的处理。。
}
});
}
德拉格姆
滴落

为了避免任何新的全局变量，变量的数量也是不可预测的，因为在第一次调用进行时，即在第一次调用返回之前，可能会发生许多拖放操作。。！ 顺便说一句，对于寻找相同答案的人来说，并不是所有的元素都适用，但我不确定。。

---

如果有人发现这里面有什么不对劲，请告诉我！：）

今天早上我在网上找同样的问题

NikhilWanpal的解决方案是可行的，但在我的例子中，有时还原位置是不正确的，可能是因为我的可拖动元素包含在可滚动的容器中

我发现这解释了如何实现一个非常有用的未记录函数：jQuery UI Dragable Revert回调

请在此回拨中检查您的答案（如果您有可能），并返回“TRUE”以取消，或返回“FASLE”以确认新位置

$(".peg").draggable(
{
  revert: function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        return true;
     }
     else
     {
        //socket object was returned,
        //we can perform additional checks here if we like
        //alert(socketObj.attr('id')); would work fine

        //return false so that the peg does not revert
        return false;
     }
  },
  snap: '.socketInner',
  snapMode: 'inner',
  snapTolerance: 35,
  distance: 8,
  stack: { group: 'pegs', min:50 },
  stop: function()
  {
     draggedOutOfSocket = false;
     alert('stop');
  }
} );

---

祝您度过愉快的一天

如果您没有在可拖动的元素上乱搞左或上定位，那么只要在ajax调用错误出现后重置这些css属性即可：

drop_elems.droppable({
  drop: function(event, ui) {
    $.ajax(url, {
      error: function(x, t, e) {
        ui.draggable.css({top: 0, left: 0});
      },
    });
  }
});

---

这样重置它。它允许您将属性顶部和左侧设置为原始位置的动画

$("#dropHere").droppable({
        drop: function(){

            if(!result){ //failed
               ui.draggable.animate(ui.draggable.data("ui-draggable").originalPosition,"slow");

            }
            else{ //instructions for success}

        }
    });

---

这是一个很棒的链接-谢谢分享。给还原位置赋予了一些真正的力量。不幸的是，这并不能回答问题。只要其返回值不依赖于ajax调用的失败或成功，Dragable revert回调就可以工作。如果要在ajax调用失败时在还原时返回true，则必须使ajax调用同步（这是一种错误的做法，因为它会冻结浏览器等待响应），或者使用承诺，这使得答案比NikhilWanpal的答案复杂得多。这应该是可以接受的答案，因为拖动开始时不需要存储原始位置。