jQuery UI Sortable item jump on start

Question

Ребята, у меня есть странная проблема witj jQuery, сортируемая, что я не знаю, как ее решить.

Я создал скрипку здесь: http://jsfiddle.net/44LgX/

Моего код расслоения плотного:

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 строки? Для демо-целей, счет не имеет значения.

Теперь вы можете демонтировать проблему, пытаясь перетащить второй столбец в первую позицию. Вы заметите, что сразу же после того, как вы начнете перетаскивание, элемент переместится с указателя на нижнюю левую часть экрана.

Теперь, я сделал некоторые копания, и, похоже, я не единственный с этой проблемой. Предлагаемое решение состояло в том, чтобы использовать хелпер: клонировать как сортируемый параметр, но это не соответствует моим потребностям, и я также хочу решить мою оригинальную проблему, а не обойти ее.

Любая помощь или проницательность - это хорошо, спасибо!

Answer 1

Это скорее место для начала, так как я должен отправиться на встречу.

Когда я избавлюсь от всех ваших css, проблем нет. fiddle with bare bones css

Однако, похоже, дерьмо. как найти оскорбительный css? Я иду двоичный поиск. избавиться от половины css, все еще есть проблема -> нет, добавить в 1/2 оставшегося отсутствующего css -> да, удалить 1/2 загруженного css. повторяйте, пока не приблизитесь к оскорбительным линиям.

Я ищу оскорбительный css atm, но если вы избили меня, не стесняйтесь публиковать свой собственный ответ. из-за этих строк появляется сообщение «click move the item». :

.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 не учитывает значения шкалы в смещениях перетаскивания.