jQuery的ui.draggable恢复事件/状态

问题描述：

有没有办法获得信息，如果一个可拖动的元素被还原？jQuery的ui.draggable恢复事件/状态

我被困在这。我想再次使一个元素可以droppable，但只有当那个躺在那里的可拖动的元素被移动到别处时（意味着不会恢复）。

答

不看起来像jQuery UI的都有支持它，所以你可以自己添加这样的：

$.ui.draggable.prototype._mouseStop = function(event) { 
    //If we are using droppables, inform the manager about the drop 
    var dropped = false; 
    if ($.ui.ddmanager && !this.options.dropBehaviour) 
     dropped = $.ui.ddmanager.drop(this, event); 

    //if a drop comes from outside (a sortable) 
    if(this.dropped) { 
     dropped = this.dropped; 
     this.dropped = false; 
    } 

    if((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) { 
     var self = this; 
     self._trigger("reverting", event); 
     $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() { 
      event.reverted = true; 
      self._trigger("stop", event); 
      self._clear(); 
     }); 
    } else { 
     this._trigger("stop", event); 
     this._clear(); 
    } 

    return false; 
}

将允许你这样做：

$(document).ready(function($) { 
    $('#draggable').draggable({ 
     revert: true, 
     reverting: function() { 
      console.log('reverted'); 
     }, 
     stop: function(event) { 
      if (event.reverted) { 
       console.log('reverted'); 
      } 
     } 
    }); 
});

非常感谢。好主意覆盖。我会测试这个，但看起来完全是我所需要的。 – flos

答

我发现有is以获取关于对象是否已恢复的信息。它内置到jQuery中，但没有很好地记录。

本质上它是通过使用回调函数为可拖动对象的还原选项完成的。

类似以下内容：

$(".myselector").draggable(
{ 
    revert: function(droppableObj) 
    { 
    //if false then no socket object drop occurred. 
    if(droppableObj === false) 
    { 
     //revert the .myselector object by returning true 
     return true; 
    } 
    else 
    { 
     //droppableObj was returned, 
     //we can perform additional checks here if we like 
     //alert(droppableObj.attr('id')); would work fine 

     //return false so that the .myselector object does not revert 
     return false; 
    } 
    } 
});

详情请参阅http://www.agilepro.com/blog/2009/12/while-this-functionality-is-built-into.html。

hm，我不知道，droppableObj是一个布尔值，就像你的代码显示的那样。你不能在你的评论中做你说的话 - 使用droppableObj来获取属性。或者，也许你可以在不同版本的jquery中使用最新版本。 – Milimetric

这很好。谢谢。我同意这应该是被接受的答案。 – Jannis

不幸的是，它仍然需要一些混乱才能将信息恢复到后续事件中，因为恢复没有收到事件或ui参数。猜猜我会.addClass或.data的东西......但谢谢你的提示！ – furf

答

扩展@ mbeedub的解决方案，这是我自己的解决方案。在我的情况下，我需要stop上的ui.position的值。如果拖动被恢复，那么我需要将对象返回到原来的位置。不幸的是，在恢复动画运行后，jQuery UI不会更新position属性。幸运的是，有一个originalPosition属性。所以只要我能检测到恢复状态（在这种情况下，通过classname），我很好！

function updatePosition (position) { 
    /* Posting position to server */ 
} 

element.draggable({ 

    drag: function (event, ui) { 
    updatePosition(ui.position); 
    }, 

    revert: function (droppable) { 
    return !droppable && element.addClass('ui-draggable-reverted'); 
    }, 

    stop: function (event, ui) { 
    if (element.is('.ui-draggable-reverted')) { 
     updatePosition(ui.originalPosition); 
     element.removeClass('ui-draggable-reverted'); 
    } else { 
     updatePosition(ui.position); 
    } 
    } 
});

jQuery的ui.draggable恢复事件/状态

相关推荐