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

Question

如果对 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>

Answer 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().. 如果有人发现这有什么不对，请告诉我！ :)

Answer 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');
  }
} );

祝你有美好的一天

Answer 3

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

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

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

Answer 5

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

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

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

            }
            else{ //instructions for success}

        }
    });