如何解决jQuery UI的connectToSortable的闪烁问题?

时间:2019-05-01 14:22:43

标签: javascript jquery html css jquery-ui

如果将连接到可排序对象的可拖动项目移入或移出可排序对象,则帮助程序最终将与光标的位置不同。

我已经测试过我是否做错了,经过一些试验,我决定查看jquery代码,并发现一个变量,它们会根据辅助对象是否位于可排序容器中而不断切换为true和false。变量名称为 innermostIntersecting 。当我把它始终保持为真时,这个问题消失了,因为现在它认为助手总是与可排序的dropzone相交。所以这给我带来了我的问题。 jQuery UI背后的团队似乎没有解决这个问题,这就是为什么我需要社区的帮助。

drag: function( event, ui, draggable ) {
        $.each( draggable.sortables, function() {
            var innermostIntersecting = false,
                sortable = this;

            // Copy over variables that sortable's _intersectsWith uses
            sortable.positionAbs = draggable.positionAbs;
            sortable.helperProportions = draggable.helperProportions;
            sortable.offset.click = draggable.offset.click;

            if ( sortable._intersectsWith( sortable.containerCache ) ) {
                innermostIntersecting = true;

                $.each( draggable.sortables, function() {

                    // Copy over variables that sortable's _intersectsWith uses
                    this.positionAbs = draggable.positionAbs;
                    this.helperProportions = draggable.helperProportions;
                    this.offset.click = draggable.offset.click;

                    if ( this !== sortable &&
                            this._intersectsWith( this.containerCache ) &&
                            $.contains( sortable.element[ 0 ], this.element[ 0 ] ) ) {
                        innermostIntersecting = false;
                    }

                    return innermostIntersecting;
                } );
            }

            if ( innermostIntersecting ) {

                // If it intersects, we use a little isOver variable and set it once,
                // so that the move-in stuff gets fired only once.
                if ( !sortable.isOver ) {
                    sortable.isOver = 1;

                    // Store draggable's parent in case we need to reappend to it later.
                    draggable._parent = ui.helper.parent();

                    sortable.currentItem = ui.helper
                        .appendTo( sortable.element )
                        .data( "ui-sortable-item", true );

                    // Store helper option to later restore it
                    sortable.options._helper = sortable.options.helper;

                    sortable.options.helper = function() {
                        return ui.helper[ 0 ];
                    };

                    // Fire the start events of the sortable with our passed browser event,
                    // and our own helper (so it doesn't create a new one)
                    event.target = sortable.currentItem[ 0 ];
                    sortable._mouseCapture( event, true );
                    sortable._mouseStart( event, true, true );

                    // Because the browser event is way off the new appended portlet,
                    // modify necessary variables to reflect the changes
                    sortable.offset.click.top = draggable.offset.click.top;
                    sortable.offset.click.left = draggable.offset.click.left;
                    sortable.offset.parent.left -= draggable.offset.parent.left -
                        sortable.offset.parent.left;
                    sortable.offset.parent.top -= draggable.offset.parent.top -
                        sortable.offset.parent.top;

                    draggable._trigger( "toSortable", event );

                    // Inform draggable that the helper is in a valid drop zone,
                    // used solely in the revert option to handle "valid/invalid".
                    draggable.dropped = sortable.element;

                    // Need to refreshPositions of all sortables in the case that
                    // adding to one sortable changes the location of the other sortables (#9675)
                    $.each( draggable.sortables, function() {
                        this.refreshPositions();
                    } );

                    // Hack so receive/update callbacks work (mostly)
                    draggable.currentItem = draggable.element;
                    sortable.fromOutside = draggable;
                }

                if ( sortable.currentItem ) {
                    sortable._mouseDrag( event );

                    // Copy the sortable's position because the draggable's can potentially reflect
                    // a relative position, while sortable is always absolute, which the dragged
                    // element has now become. (#8809)
                    ui.position = sortable.position;
                }
            } else {

                // If it doesn't intersect with the sortable, and it intersected before,
                // we fake the drag stop of the sortable, but make sure it doesn't remove
                // the helper by using cancelHelperRemoval.
                if ( sortable.isOver ) {

                    sortable.isOver = 0;
                    sortable.cancelHelperRemoval = true;

                    // Calling sortable's mouseStop would trigger a revert,
                    // so revert must be temporarily false until after mouseStop is called.
                    sortable.options._revert = sortable.options.revert;
                    sortable.options.revert = false;

                    sortable._trigger( "out", event, sortable._uiHash( sortable ) );
                    sortable._mouseStop( event, true );

                    // Restore sortable behaviors that were modfied
                    // when the draggable entered the sortable area (#9481)
                    sortable.options.revert = sortable.options._revert;
                    sortable.options.helper = sortable.options._helper;

                    if ( sortable.placeholder ) {
                        sortable.placeholder.remove();
                    }

                    // Restore and recalculate the draggable's offset considering the sortable
                    // may have modified them in unexpected ways. (#8809, #10669)
                    ui.helper.appendTo( draggable._parent );
                    draggable._refreshOffsets( event );
                    ui.position = draggable._generatePosition( event, true );

                    draggable._trigger( "fromSortable", event );

                    // Inform draggable that the helper is no longer in a valid drop zone
                    draggable.dropped = false;

                    // Need to refreshPositions of all sortables just in case removing
                    // from one sortable changes the location of other sortables (#9675)
                    $.each( draggable.sortables, function() {
                        this.refreshPositions();
                    } );
                }
            }
        } );
    }
} );

这是他们在connectToSortable函数后面的代码。我在这里看到的问题是,即使根据代码,即使它从可拖动切换为可排序的一部分,它也会将可拖动助手的位置复制到现在的新可排序助手中。除非它不起作用,而且我有点被困在这里。

当我离开可排序的拖放区时,我希望其位置与光标相同,但是如果您进进出出直到屏幕上看不到它,它都会不断变化。

0 个答案:

没有答案