jQuery ui.draggable 事件/状态恢复

Posted 2023-05-08

【中文标题】jQuery ui.draggable 事件/状态恢复

【英文标题】：jQuery ui.draggable event/status on revert

【发布时间】：2010-12-23 14:51:21

【问题描述】：

如果可拖动的元素被还原，有没有办法获取信息？

我坚持这一点。我想让一个元素再次可放置，但前提是放置在那里的可拖动元素移动到其他地方（意思是不会恢复）。

【参考方案1】：

我发现 可以获取有关对象是否已还原的信息。它内置在 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。

【讨论】：

嗯，我不知道，droppableObj 是一个布尔值，如您的代码所示。你不能按照你在 cmets 中所说的去做 - 使用 droppableObj 来获取属性。或者你可以在不同版本的 jquery 中使用，我使用的是最新版本。

这很好用。谢谢。我同意这应该是公认的答案。

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

【参考方案2】：

看起来 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');
            
        
    );
);

【讨论】：

非常感谢。覆盖的好主意。我会对此进行测试，但看起来完全符合我的需要。

【参考方案3】：

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

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