javascript - Droppable 在 DROP 之后触发 OUT 事件

Question

我有一批小石头，可以拖拽，可以分几组丢。为了正确突出显示，我使用 OVER 和 OUT 事件。但是我对 DROP 和 OUT 事件有一些麻烦。当我在组中拖放一块石头时，会触发 OVER 和 DROP 事件，但是一旦我拿起下一块石头（移动它刚好超过拖动的阈值），'旧' 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, 
    });

编辑

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

标签： javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable

Answer 1

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

造成麻烦的原因是，一旦我丢下一块石头，我的自定义accept函数就会返回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;

    }