Droppable 在 DROP 之后触发 OUT 事件

Posted 2023-05-08

【中文标题】Droppable 在 DROP 之后触发 OUT 事件

【英文标题】：Droppable triggers OUT event after DROP

【发布时间】：2020-04-27 02:12:47

【问题描述】：

我有一批小石头，可以拖拽，可以分几组掉落。为了正确突出显示，我使用 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, 
    );

编辑

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

【问题讨论】：

欢迎来到 Stack Overflow。看来你自己已经解决了这个问题。将来，请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example

【参考方案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;