Webkit和jQuery draggable跳跃

问题描述

作为一个实验，我创建了几个div，并使用CSS3旋转它们。

  .items {
 position ：绝对
 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 .random（））+'deg）'，
'-o-transform'：'rotate（'+（180 * Math.random（））+'deg）'，
'-webkit- transform'：'rotate（'+（180 * Math.random（））+'deg）'，
}）; 
}）; 
 
 $（'。Items'）。draggable（）; 
  

拖动工作，但是我注意到突然跳跃，而仅仅在webkit浏览器中拖动div

如果我删除了 position：absolute 风格，那么跳跃会更糟。我认为在webkit和gecko之间的转换起源可能有差异，但它们都在元素的默认中心。

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

这里是我的问题的工作演示。尝试在Safari / Chrome和Firefox中查看。

这是webkit中的错误还是浏览器如何呈现webkit？

解决方案

这是draggable依赖jquery offset（）函数和 offset（）使用本机js函数 getBoundingClientRect ）。最终，这是一个问题，jquery核心没有补偿与 getBoundingClientRect（）相关联的不一致。 Firefox的版本 getBoundingClientRect（）会忽略css3 transforms（rotation），而chrome / safari（webkit）不会。

说明了此问题。

一个简单的解决方法： / b> / 更换

  
 //元素在页面上的绝对位置减去边距
 this.offset = this.positionAbs = this.element.offset（）; 
   
  pre>  
 //元素在页面上的绝对位置减去边距
 this.offset = this.positionAbs = {top：this.element [0] .offsetTop， 
 left：this.element [0] .offsetLeft}; 
  

最后是您的。

As an experiment, I created a few div's and rotated them using 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;
    }

I then randomly styled them and made them draggable via 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();

The dragging works, but I am noticing a sudden jump while dragging the div's only in webkit browsers, while everything is fine in Firefox.

If I remove the position: absolute style, the 'jumping' is even worse. I thought there was maybe a difference in the transform origin between webkit and gecko, but they are both at the centre of the element by default.

I have searched around already, but only came up with results about scrollbars or sortable lists.

Here is a working demo of my problem. Try to view it in both Safari/Chrome and Firefox. http://jsbin.com/ucehu/

Is this a bug within webkit or how the browsers render webkit?

解决方案

This is a result of draggable's reliance on the jquery offset() function and offset()'s use of the native js function getBoundingClientRect(). Ultimately this is an issue with the jquery core not compensating for the inconsistencies associated with getBoundingClientRect(). Firefox's version of getBoundingClientRect() ignores the css3 transforms (rotation) whereas chrome/safari (webkit) don't.

here is an illustration of the issue.

A hacky workaround:

replace following in jquery.ui.draggable.js

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

with

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

and finally a monkeypatched version of your jsbin.

这篇关于Webkit和jQuery draggable跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！