Droppable 在 DROP 之后触发 OUT 事件

Question

我有一批小石头，可以拖拽，可以分批丢。为了正确突出显示，我使用了 OVER 和 OUT 事件。但是我在 DROP 和 OUT 事件上遇到了一些麻烦。当我在组中拖放一块石头时，会触发 OVER 和 DROP 事件，但是一旦我拿起下一块石头（移动它刚好超过拖动的阈值），'old' OUT事件被触发。

有没有人遇到过同样的问题可以帮助我？

我的 droppable 组是这样设置的：

   $('.group').droppable({
        accept: this.canItBeDropped.bind(this),
        drop: this.drop.bind(this),
        over: this.over.bind(this),
        out: this.out.bind(this),
    });

还有我的可拖动物，石头，像这样：

    this.$stone.draggable({
        distance: 3,
        revert: 'invalid',
        revertDuration: 400,
        scroll: false,
        stack: '.stone',
        refreshPositions: true, 
    });

编辑

进一步深入库后，我发现它与我的自定义接受函数有关。但是图书馆用新石头来称呼它，而不是我所期望的旧石头。

Answer 1

我终于解决了这个问题，并将描述它，以防万一以后有人遇到类似的问题。

问题是因为一旦我丢下一块石头，我的自定义 accept 函数就会 return false 因为现在这块石头不适合现在的组已经在其中（我的项目的要求）

所以我的解决方法是在实际删除之前确定 if 语句的结果

    drop: function( draggable, event ) {

        var dropped = false;

        // Create a copy of the droppables in case the list changes during the drop (#9116)
        $.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {

            if ( !this.options ) {
                return;
            }

            // determine the result for the if statement beofre the dropping
            let deactivate = !this.options.disabled && this.visible 
                && this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) 

            if ( !this.options.disabled && this.visible && 
                    intersect( draggable, this, this.options.tolerance, event ) ) {
                dropped = this._drop.call( this, event ) || dropped;
            }

            if (deactivate) {
                this.isout = true;
                this.isover = false;
                this._deactivate.call( this, event );
            }

        } );
        return dropped;

    }

Droppable 在 DROP 之后触发 OUT 事件

Droppable triggers OUT event after DROP

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable