Webkit和jQuery可拖动跳跃

Question

作为实验，我创建了一些div并使用CSS3对其进行了旋转。

    .items { 
        position: absolute;
        cursor: pointer;
        background: #FFC400;
        -moz-box-shadow: 0px 0px 2px #E39900;
        -webkit-box-shadow: 1px 1px 2px #E39900; 
        box-shadow: 0px 0px 2px #E39900;
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }

然后，我随机设置它们的样式，并使其通过jQuery可拖动。

    $('.items').each(function() {
        $(this).css({
            top: (80 * Math.random()) + '%',
            left: (80 * Math.random()) + '%',
            width: (100 + 200 * Math.random()) + 'px',
            height: (10 + 10 * Math.random()) + 'px',
            '-moz-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-o-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
            '-webkit-transform': 'rotate(' + (180 * Math.random()) + 'deg)',
        });
    });

    $('.items').draggable();

拖动有效，但我注意到仅在webkit浏览器中拖动div时突然跳了一下，而在Firefox中一切正常。

如果我删除 职位：绝对 风格，那么“跳跃”就更糟了。我以为webkit和gecko之间的转换起源可能有所不同，但是默认情况下它们都位于元素的中心。

我已经搜索过了，但只想出了有关滚动条或可排序列表的结果。

这是Webkit内的错误还是浏览器如何呈现Webkit？

Answer 1

这是可拖动对jqueryoffset()函数的依赖以及offset()对本机js函数的使用的结果getBoundingClientRect()。最终，这是jquery核心无法补偿与相关的不一致的问题getBoundingClientRect()。Firefox的版本会getBoundingClientRect()忽略css3转换（旋转），而chrome/ safari（webkit）则不会。

这是问题的例证。

hacky解决方法：

替换jquery.ui.draggable.js中的以下内容

//The element's absolute position on the page minus margins
this.offset = this.positionAbs = this.element.offset();

与

//The element's absolute position on the page minus margins
this.offset = this.positionAbs = { top: this.element[0].offsetTop, 
                                   left: this.element[0].offsetLeft };

最后是您的jsbin的monkeypatched版本。