jQuery UI Sortable item jump on start

Question

Hy faceci, mam dziwny problem z jQuery jQuery, którego nie potrafię rozwiązać.

Stworzyłem skrzypce tutaj: http://jsfiddle.net/44LgX/

Moje js kod:

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()); 
    } 
}); 

}); 

Zasadniczo, każdy rząd składa się z dwóch kolumn, które są sortable w tym jednym rzędzie. Dlaczego 3 rzędy? Tylko dla celów demonstracyjnych, liczenie nie ma znaczenia.

Teraz możesz przeprowadzić demo, próbując przeciągnąć drugą kolumnę na pierwszą pozycję. Zauważysz, że natychmiast po rozpoczęciu przeciągania element przeskoczy od wskaźnika do dolnej lewej części ekranu.

Teraz zrobiłem kopanie i wygląda na to, że nie jestem jedyny z tym problemem. Proponowanym rozwiązaniem było użycie helpera: klon jako parametr sortowalny, ale to nie pasuje do moich potrzeb, a także chcę rozwiązać mój pierwotny problem, zamiast je obejść.

Każda pomoc lub wgląd jest mile widziany, dzięki!

Answer 1

to jest bardziej miejsce do rozpoczęcia, ponieważ muszę udać się na spotkanie.

kiedy pozbywam się wszystkich twoich css, nie ma problemu. fiddle with bare bones css

Jednak wygląda na to, że jest bzdura. jak znaleźć obrażające się css? szukam binarnie. pozbyć się połowy css, nadal mieć problem -> nie, dodać 1/2 brakującego css -> tak, usunąć 1/2 załadowanego css. powtarzaj, aż zbliżysz się do linii obraźliwych.

Poszukuję obraźliwego bankructwa css, ale jeśli mnie pobijesz, możesz wysłać własną odpowiedź. do tej pory pojawił się problem "click moves the item" z powodu tych linii. :

.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 i scale/scale3d przyczyną tego. Patrz: this question.

Powód? jQuery-ui nie uwzględnia wartości skali w swoich przesunięciach przeciągnięcia.