在jQuery中，如何在ajax调用失败时恢复可拖动？
如果ajax调用on drop返回失败，我希望draggable恢复到其原始位置。 以下是我想象的代码..如果ajax调用正在进行中，拖动器可以放置在droppable中，这是可以的…
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. } }); } DragMe DropHere 感谢您的重播@Fran Verona。
我这样解决了：
DragMe DropHere
想要避免任何新的全局变量，变量的数量也是不可预测的，因为在第一个正在进行时，即在第一个调用返回之前，可能会发生许多拖放。 顺便说一句，对于任何寻找相同答案的人来说， .data（）并不适用于所有元素，但我不确定jQuery.data（） ，但是如果有人发现任何错误，请告诉我！ 🙂
我今天早上在网上寻找同样可拖延的问题。
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'); } } );
祝你今天愉快
如果您没有在可拖动元素上进行左侧或顶部定位，那么就像在ajax调用错误时重置这些css属性一样简单：
drop_elems.droppable({ drop: function(event, ui) { $.ajax(url, { error: function(x, t, e) { ui.draggable.css({top: 0, left: 0}); }, }); } });
如果跌落失败，请在开始拖动之前尝试保存原始位置并恢复原始位置。 您可以像这样保存原始位置：
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 }); } }); } });
以这种方式重置它。 它允许您将属性顶部和左侧设置为原始位置的动画
$("#dropHere").droppable({ drop: function(){ if(!result){ //failed ui.draggable.animate(ui.draggable.data("ui-draggable").originalPosition,"slow"); } else{ //instructions for success} } });