jQuery UI Sortierbare Artikel springen beim Start

Question

Hy Jungs, ich habe ein seltsames Problem mit jQuery sortierbar, dass ich nicht wissen, wie zu lösen.

ich eine Geige hier geschaffen haben: http://jsfiddle.net/44LgX/

Mein js Code:

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

}); 

Grundsätzlich jede Reihe besteht aus zwei Spalten, die innerhalb dieser einzelnen Zeile sortierbar sind. Warum 3 Reihen? Nur für Demozwecke zählt die Zählung nicht.

Jetzt können Sie das Problem demonstrieren, indem Sie versuchen, die zweite Spalte an die erste Position zu ziehen. Sie werden feststellen, dass das Element unmittelbar nach dem Ziehen vom Zeiger zum unteren linken Bildschirmbereich springt.

Jetzt habe ich etwas graben, und es scheint, ich bin nicht der einzige mit diesem Problem. Vorgeschlagene Lösung war, helper: clon als sortierbaren Parameter zu verwenden, aber das passt nicht zu meinen Bedürfnissen und ich möchte auch mein ursprüngliches Problem lösen, anstatt es zu umgehen.

Jede Hilfe oder Einsicht ist willkommen, danke!

Answer 1

Dies ist mehr ein Ort, um loszulegen, wie ich zu einem Treffen ausgehen muss.

Wenn ich alle Ihre CSS loswerden, gibt es kein Problem. fiddle with bare bones css

jedoch sieht es wie Mist aus. Wie finde ich das beleidigende CSS? Ich gehe binäre Suche. loswerden die Hälfte der CSS, immer noch ein Problem -> nein, in 1/2 der verbleibenden fehlenden CSS hinzufügen -> ja, entfernen Sie 1/2 der geladenen CSS. wiederhole dich, bis du nahe an die störenden Linien gekommen bist.

Ich bin auf der Suche nach der beleidigenden CSS atm, aber wenn Sie mich dazu schlagen, fühlen Sie sich frei, Ihre eigene Antwort zu posten. Bis jetzt erscheint das Problem "Klicken bewegt den Gegenstand" wegen dieser Linien. :

.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 und scale/scale3d Ursache dafür. Siehe this question.

Der Grund? jQuery-ui berücksichtigt Skalierungswerte nicht in seine Verschiebungsoffsets.