代码之家  ›  专栏  ›  技术社区  ›  marius

jQuery UI可选css转换问题

  •  3
  • marius  · 技术社区  · 7 年前

    我有一个关于jQuery UI可选的奇怪错误。如果在可选容器中使用变换(缩放+平移),套索似乎不适合选择对象。从视觉上看,套索工作得很好!

    下面是我的编码示例: Fiddle

    工作案例:

    enter image description here enter image description here

    不工作情况:

    enter image description here

    显然,这是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 回复  |  直到 7 年前
        1
  •  4
  •   marius    7 年前

    我自己找到了解决方案并修改了 jsFiddle .

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

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

    enter image description here