jQuery UI 可选择的 css 转换问题

Question

我有一个关于 jQuery UI 可选的奇怪错误。如果我在可选容器内使用变换(缩放+平移)，则套索对于选择对象似乎不正确。从视觉上看，套索效果非常好!

这是我的编码示例:Fiddle

工作案例:

不工作的情况:

显然这是 jQuery UI 的一个限制，它忽略了 offset() 等函数中的 CSS 转换。在 jQuery UI 中，我找到了为选择项目进行计算的可选择部分，但我似乎无法以正确的方式调整它:

_create: function() {
        var that = this;

        this._addClass( "ui-selectable" );

        this.dragged = false;

        // Cache selectee children based on filter
        this.refresh = function() {
            that.elementPos = $( that.element[ 0 ] ).offset();
            that.selectees = $( that.options.filter, that.element[ 0 ] );
            that._addClass( that.selectees, "ui-selectee" );
            that.selectees.each( function() {
                var $this = $( this ),
                    selecteeOffset = $this.offset(),
                    pos = {
                        left: selecteeOffset.left - that.elementPos.left,
                        top: selecteeOffset.top - that.elementPos.top
                    };
                $.data( this, "selectable-item", {
                    element: this,
                    $element: $this,
                    left: pos.left,
                    top: pos.top,
                    right: pos.left + $this.outerWidth(),
                    bottom: pos.top + $this.outerHeight(),
                    startselected: false,
                    selected: $this.hasClass( "ui-selected" ),
                    selecting: $this.hasClass( "ui-selecting" ),
                    unselecting: $this.hasClass( "ui-unselecting" )
                } );
            } );
        };
        this.refresh();

        this._mouseInit();

        this.helper = $( "<div>" );
        this._addClass( this.helper, "ui-selectable-helper" );
    },

以前有人遇到过这个问题吗？是否有已知的修复、解决方法或核心调整？

Answer 1

我自己找到了解决办法，修改了jsFiddle .

$fixedRect = $(this)[0].getBoundingClientRect();

我用红色标记了更改后的 jQuery UI 核心代码。