javascript - 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 中一切正常。

如果我删除 position: absolute 样式，“跳跃”会更糟。我认为 webkit 和 gecko 之间的转换原点可能有所不同，但默认情况下它们都位于元素的中心。

我已经四处搜索，但只找到了有关滚动条或可排序列表的结果。

这是我的问题的工作演示。尝试在 Safari/Chrome 和 Firefox 中查看它。 http://jsbin.com/ucehu/

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

Answer 1

作为@David Wick 的回答，我在不同的浏览器上绘制了一个图像来指示旋转后的偏移量。

如果你不想打补丁或修改 jquery.ui.draggable.js，这里是修复的代码

$(document).ready(function () {
    var recoupLeft, recoupTop;
    $('#box').draggable({
        start: function (event, ui) {
            var left = parseInt($(this).css('left'),10);
            left = isNaN(left) ? 0 : left;
            var top = parseInt($(this).css('top'),10);
            top = isNaN(top) ? 0 : top;
            recoupLeft = left - ui.position.left;
            recoupTop = top - ui.position.top;
        },
        drag: function (event, ui) {
            ui.position.left += recoupLeft;
            ui.position.top += recoupTop;
        }
    });
});

或者您可以看到 demo