在 jQuery 中，如何在 ajax 调用失败时恢复可拖动对象？

Posted 2023-05-08

【中文标题】在 jQuery 中，如何在 ajax 调用失败时恢复可拖动对象？

【英文标题】：In jQuery, how to revert a draggable on ajax call failure?

【发布时间】：2011-07-15 18:20:47

【问题描述】：

如果对 drop 的 ajax 调用返回失败，我希望可拖动对象恢复到其原始位置。这是我想象中的代码..如果在ajax调用过程中可拖动对象位于droppable中，则可以...

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

【参考方案1】：

感谢您重播@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>

想要避免任何新的全局变量，变量的数量也是不可预测的，因为在第一次进行时可能会发生许多拖放，即在第一次调用返回之前......！ 顺便说一句，对于寻找相同答案的任何人，.data() 不适用于所有元素，但我不确定jQuery.data().. 如果有人发现这有什么不对，请告诉我！ :)

【参考方案2】：

今天早上我在网上寻找同样的可拖拽问题。

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

我找到了this article，它解释了如何实现一个非常有用的未记录函数：jQuery UI Draggable Revert Callback。

在此回调中检查您的答案（如果可能的话）并返回“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 调用失败或成功，可拖动的恢复回调就可以工作。如果你想在 ajax 调用失败时返回 true，那么你必须使你的 ajax 调用同步（不好的做法，因为它冻结浏览器等待响应）或使用 Promises，这使得答案比NikhilWanpal 的。

【参考方案3】：

如果您没有弄乱可拖动元素的左侧或顶部位置，那么一旦 ajax 调用出错，只需重置这些 css 属性即可：

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

【参考方案4】：

如果拖放失败，请在开始拖动之前尝试保存原始位置并恢复它。您可以像这样保存原始位置：

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

【参考方案5】：

以这种方式重置它。它允许您将属性设置为动画顶部和左侧到原始位置

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

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

            
            else //instructions for success

        
    );

【讨论】：

这应该是公认的答案，因为它不需要在拖动开始时存储原始位置。