jQuery UI Mục có thể sắp xếp nhảy khi bắt đầu

Question

Hy guys, tôi có một vấn đề kỳ lạ witj jQuery sắp xếp mà tôi không biết làm thế nào để giải quyết.

tôi đã tạo ra một fiddle đây: http://jsfiddle.net/44LgX/

My js mã:

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

}); 

Về cơ bản, mỗi hàng gồm hai cột đó là sắp xếp được trong đó hàng duy nhất. Tại sao có 3 hàng? Chỉ cho mục đích demo, đếm không quan trọng.

Bây giờ, bạn có thể giới thiệu vấn đề bằng cách cố gắng kéo cột thứ hai đến vị trí đầu tiên. Bạn sẽ nhận thấy rằng ngay sau khi bạn bắt đầu kéo, phần tử sẽ nhảy con trỏ đến phần dưới cùng bên trái của màn hình.

Bây giờ, tôi đã thực hiện một số công việc đào bới và có vẻ như tôi không phải là người duy nhất có vấn đề này. Đề xuất giải pháp là sử dụng helper: clone như một tham số có thể sắp xếp, nhưng điều đó không phù hợp với nhu cầu của tôi và tôi cũng muốn giải quyết vấn đề ban đầu của tôi, thay vì đi xung quanh nó.

Bất kỳ trợ giúp hoặc thông tin chi tiết nào đều được chào đón, cảm ơn!

Answer 1

đây là nơi để bắt đầu, vì tôi phải đi đến một cuộc họp.

khi tôi loại bỏ tất cả css của bạn, không có vấn đề gì. fiddle with bare bones css

tuy nhiên, có vẻ như crap. làm thế nào để tìm css vi phạm? tôi đi tìm kiếm nhị phân. được thoát khỏi một nửa css, vẫn còn có một vấn đề -> không, thêm vào 1/2 của css còn lại còn thiếu -> có, loại bỏ 1/2 css nạp. lặp lại cho đến khi bạn đến gần các dòng vi phạm.

Tôi đang tìm kiếm css atm vi phạm, nhưng nếu bạn đánh bại tôi, bạn có thể tự do đăng câu trả lời của riêng mình. cho đến nay vấn đề 'nhấp vào di chuyển mục' xuất hiện vì những dòng này. :

.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 và scale/scale3d nguyên nhân này. Tham khảo this question.

Lý do? jQuery-ui không ảnh hưởng đến các giá trị tỷ lệ trong phần bù của nó.