jQuery UI 可选择的 css 转换问题

Posted 2023-05-07

【中文标题】jQuery UI 可选择的 css 转换问题

【英文标题】：jQuery UI selectable css transform issue

【发布时间】：2018-06-14 07:26:24

【问题描述】：

我有一个关于 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" );
    ,

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

【问题讨论】：

没有人知道如何解决它？

【参考方案1】：

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

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

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

【讨论】：

非常好，完美运行。为我节省了很多时间。

太棒了！有用。我在这个问题上找到的唯一答案！