Javascript 在可拖放的默认还原动画之前播放自定义抖动效果？

我的网站上有一个

可拖动的

和

可拖放的

元素。当用户试图将

元素放到错误的容器上时，我想使
元素抖动，然后恢复其位置

到目前为止，我有一个代码可以在没有震动的情况下完成这一切：

$('#elementID').draggable({
    revert: 'invalid'
});

$container.droppable({
    accept: function(dropElem){
        return ($(this).attr("meta-ok") === "true"); //return false if it's "wrong" container
    },
...

当我把元素放在“错误”的容器上时，它确实会还原元素的位置（好），但在还原动画发生之前并没有“抖动”

我试图从添加
$（…）.effect（'shake'）
，但如何在还原动画之前播放，然后使用“标准”还原动画（我不想替换默认的还原动画，但在其之前插入我的抖动）？
在
mouseStop
上执行
revert
动画，并嵌套在不同的验证中，因此很难直接修改。但是您可以创建一个
自定义可拖动的
，并修改还原动画。像这样：

$.widget("ui.customDraggable", $.ui.draggable, {
    _mouseStop: function(event) {

        //If we are using droppables, inform the manager about the drop
        var that = this,
            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))) {
            // Original revert is simply animate to original position. You can add whatever you want before
            $(this.helper).effect('shake').animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
                if (that._trigger("stop", event) !== false) {
                    that._clear();
                }
            });
        } else {
            if (this._trigger("stop", event) !== false) {
                this._clear();
            }
        }

        return false;
    },
})

$('#draggable').customDraggable({
    revert: 'invalid',

});

$('#droppable').droppable({
    accept: '#anything'

});


甚至更好的是，允许在
选项中设置要还原的动画。稍微复杂一点，很可能会干扰其他功能，但更灵活。大概是这样的：

$.widget("ui.customDraggable", $.ui.draggable, {
    _mouseStop: function(event) {

        //If we are using droppables, inform the manager about the drop
        var that = this,
            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))) {

           // This allows you to set the animation you want. Since stop event is triggered on animation end, you need the animation to be 'queueable'.
            this.options.revertAnimation.call(this.helper, {originalPosition: this.originalPosition, helper: this.helper});
            $(this.helper).queue( function() {
                if (that._trigger("stop", event) !== false) {
                    that._clear();
                }
            });
        } else {
            if (this._trigger("stop", event) !== false) {
                this._clear();
            }
        }

        return false;
    },



});



$('#draggable').customDraggable({
    revert: 'invalid',
    revertAnimation: function(ui){// this option will be called instead of the normal revert
        $(ui.helper).effect('shake').fadeOut().fadeIn().animate(ui.originalPosition, parseInt(500, 10))
    },
    stop: function(){
        console.log('stopped')
    }

});

$('#droppable').droppable({
    accept: '#anything'

});


编辑：为了只对无效目标产生效果，它变得有点复杂。有不同的方法可以做到这一点，其中之一是将
还原为
真
，让
可拖放
接受
可拖放
并管理拖放时的行为。您已经删除了
变量，该变量将告诉您是否在目标上删除了可拖动文件，如果是这样，您将决定是否恢复该文件。例如：

...

        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))) {
            if (dropped) {
                $(this.helper).effect('shake').animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function () {
                    if (that._trigger("stop", event) !== false) {
                        that._clear();
                    }
                });
            } else if (!dropped) {
                $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function () {
                    if (that._trigger("stop", event) !== false) {
                        that._clear();
                    }
                });
            }
          ...

谢谢，回答得很好：）还有一个问题。现在，即使我没有尝试将元素放在错误的容器上（但放在任何无效的容器上），元素也会抖动。我如何区分将元素放置在错误容器上的情况和将其放置在不可放置区域（两种情况下，
drop
value均为false）上的情况？