【问题标题】:jQuery UI selectable css transform issuejQuery UI 可选择的 css 转换问题
【发布时间】: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" );
    },

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

【问题讨论】:

  • 没有人知道如何解决它?

标签: jquery jquery-ui css-transforms jquery-ui-selectable


【解决方案1】:

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

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

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

【讨论】:

  • 非常好,完美运行。为我节省了很多时间。
  • 太棒了!有用。我在这个问题上找到的唯一答案!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-04
  • 2011-10-28
相关资源
最近更新 更多