14

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

5 回答 5

18

感谢您重播@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() .. 如果有人发现任何错误，请告诉我！:)

于 2011-03-16T06:08:50.887 回答
4

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

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

祝你今天过得愉快

于 2012-03-17T10:26:58.360 回答
3

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

drop_elems.droppable({
  drop: function(event, ui) {
    $.ajax(url, {
      error: function(x, t, e) {
        ui.draggable.css({top: 0, left: 0});
      },
    });
  }
});
于 2013-05-30T22:14:22.877 回答
2

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

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
               });
           }
       });
   }
});
于 2011-03-15T13:14:08.643 回答
2

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

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

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

            }
            else{ //instructions for success}

        }
    });
于 2017-08-04T12:49:59.667 回答