jQuery UI 可选 css 转换问题

Question

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

这是我的编码示例：Fiddle

工作案例：

不工作案例：

显然这是 jQuery UI 的限制，他们忽略了 CSS 函数中的转换，例如 offset()。在 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();

我把改动的jQueryUI核心代码标红了

jQuery UI 可选 css 转换问题

jQuery UI selectable css transform issue

jquery

jquery-ui

jquery-ui-selectable

css-transforms