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

Question

如果 drop 上的 ajax 调用返回失败，我希望可拖动对象恢复到其原始位置。这是我想象的代码。如果在 ajax 调用正在进行时可拖动对象位于可放置对象中，那就可以了...

<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 的解决方案有效，但有时在我的情况下，恢复位置不正确，可能是因为我的可拖动元素包含在可滚动容器中。

我发现这篇文章解释了如何实现一个非常有用的未记录的函数：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}

        }
    });