jQuery UI 可排序项目在开始时跳转

Question

大家好，我有一个关于 jQuery 可排序的奇怪问题，我不知道如何解决。

我在这里创建了一个小提琴：http://jsfiddle.net/44LgX/

我的js代码：

jQuery( document ).ready( function() {

$( '.v-content-container' ).sortable({
    placeholder : 'v-column-placeholder',
    start       : function( e, ui ){
        ui.placeholder.width( ui.item.width() );
        ui.placeholder.height( ui.item.height() );
    }
});

});

基本上，每一行由两列组成，可在该单行内排序。为什么是 3 行？仅出于演示目的，计数无关紧要。

现在，您可以通过尝试将第二列拖到第一个位置来演示该问题。您会注意到，在您开始拖动后，元素会立即从指针跳到屏幕的左下方。

现在，我做了一些挖掘工作，看来我不是唯一一个遇到这个问题的人。建议的解决方案是使用 helper: clone 作为可排序参数，但这不符合我的需求，我也想解决我原来的问题，而不是绕过它。

欢迎任何帮助或见解，谢谢！

Answer 1

这更像是一个开始的地方，因为我必须去开会。

当我摆脱你所有的 CSS 时，就没有问题了。 fiddle with bare bones css

但是，它看起来像废话。如何找到有问题的CSS？我去二进制搜索。去掉一半的 css，仍然有问题 --> 不，添加剩余缺少的 css 的 1/2 --> 是的，删除 1/2 加载的 css。重复，直到你接近有问题的线。

我正在寻找有问题的 css atm，但如果你打败了我，请随时发布你自己的答案。到目前为止，由于这些行，出现了“点击移动项目”问题。 ：

.v-row-fluid .v-span12 {
    width: 100%;
    *width: 99.94680851063829%;
}

.v-row-fluid .v-span11 {
    width: 91.48936170212765%;
    *width: 91.43617021276594%;
}

.v-row-fluid .v-span10 {
    width: 82.97872340425532%;
    *width: 82.92553191489361%;
}

.v-row-fluid .v-span9 {
    width: 74.46808510638297%;
    *width: 74.41489361702126%;
}

.v-row-fluid .v-span8 {
    width: 65.95744680851064%;
    *width: 65.90425531914893%;
}

.v-row-fluid .v-span7 {
    width: 57.44680851063829%;
    *width: 57.39361702127659%;
}

.v-row-fluid .v-span6 {
    width: 48.93617021276595%;
    *width: 48.88297872340425%;
}

.v-row-fluid .v-span5 {
    width: 40.42553191489362%;
    *width: 40.37234042553192%;
}

.v-row-fluid .v-span4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%;
}

.v-row-fluid .v-span3 {
    width: 23.404255319148934%;
    *width: 23.351063829787233%;
}

.v-row-fluid .v-span2 {
    width: 14.893617021276595%;
    *width: 14.840425531914894%;
}

.v-row-fluid .v-span1 {
    width: 6.382978723404255%;
    *width: 6.329787234042553%;
}

Answer 2

zoom 和 scale/scale3d 导致此问题。参考this question。

原因？ jQuery-ui 不会将比例值计入其拖动偏移量。