jquery sortierbares Platzhalterhöhenproblem

93

Aus irgendeinem Grund beträgt der Platzhalter für meine sortierbaren Elemente etwa 10 Pixel. Alle meine sortierbaren Gegenstände haben unterschiedliche Höhen. Wie kann ich die Höhe jedes Platzhalters an das zu verschiebende Objekt anpassen?

jquery jquery-ui jquery-ui-sortable oshirowanen
quelle
Kannst du es auf jsFiddle posten?
Satish
Ist dies passiert, wenn Sie Ihren Artikel einfach per Drag & Drop an einen anderen Ort ziehen? oder haben die Artikel nach dem Laden der Seite bereits diese Höhe? Schauen Sie doch mal hier vorbei: bugs.jqueryui.com/ticket/4482 und versuchen Sie, wie erwähnt zu umgehen
Mohammad

Antworten:

250

Normalerweise löse ich dieses Problem, indem ich einen Rückruf binde, der die Höhe des Platzhalters auf die Höhe des zu sortierenden Elements für das startEreignis festlegt . Es ist eine einfache Lösung, mit der Sie genau steuern können, wie Ihr Platzhalter angezeigt werden soll.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

Siehe aktualisierten Testfall

Mekwall
quelle
21
Ich persönlich musste ui.item.height () durch ui.helper.outerHeight () ersetzen, da einige Probleme mit Rändern und Polstern die tatsächliche Höhe des Elements
verzerrten
Entschuldigung, aber ich denke nicht, dass es gut funktioniert. In diesem Link jsfiddle.net/t8gcZ/1 entspricht die Platzhalterhöhe der Elementhöhe (237px), aber zum Startzeitpunkt konnten wir sehen, dass das untergeordnete Element einen Wurf nach oben verschoben wurde
Makio
@ Makio Das liegt am Polsterboden. Das Hinzufügen eines Polsterbodens zum Platzhalter löst dieses Problem. jsfiddle.net/t8gcZ/136
Mekwall
15

Haben Sie versucht, die forcePlaceholderSize:trueEigenschaft festzulegen? Lesen Sie die Dokumentationsseite zur sortierbaren jQuery-Benutzeroberfläche .

DarthJDG
quelle
2
Ich habe das versucht, aber das Hinzufügen von wahr oder falsch macht keinen Unterschied zu meiner ursprünglichen Site, die es bei 10px hoch hält. In dieser jsfiddle wird die Größe korrekt geändert, aber die auf true oder false gesetzte Forceplaceholder-Größe macht keinen Unterschied. jsfiddle.net/t8gcZ
oshirowanen
@oshirowanen: Unter welchem ​​Browser testest du es?
DarthJDG
@oshirowanen: Kannst du einen Link zu dem Code posten, in dem er tatsächlich kaputt ist?
DarthJDG
2
Das funktioniert bei mir. Alles was ich tun musste war das CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }zu ändern .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(also die Höhe entfernen) Also @DarthJDG du hast recht!
JP Hellemons
@ JPHellemons, die nur funktioniert, wenn die Höhe nicht dynamisch ist
Erdal G.
2

Sind deine Elemente display: block? Inline-Elemente können dazu führen, dass der Platzhalter die Höhe nicht richtig beibehält. Z.B. Diese jsFiddle scheint ein ähnliches Problem zu haben wie das von Ihnen beschriebene. Das Hinzufügen display: blockzur .portletKlasse behebt das Problem.

Gijs
quelle
Gleiches gilt für schwebende Elemente. Wenn die Listenelemente schweben, sollte auch der Platzhalter schweben.
Adrian Marinica
2

Anstatt "ui.item.height ()" zu verwenden, können Sie "ui.helper [0] .scrollHeight" verwenden, um ein stabiles Ergebnis zu erzielen, wenn Sie ein Element auch aus einem externen Container ziehen.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});
Elanchezhian Narayanasamy
quelle
1

Sie können einen Stil für Ihren Platzhalter als Option für Ihre Sortierbarkeit festlegen.

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

Und geben Sie diesem Stil einfach eine Höhe. Hoffe das funktioniert.

MANATTWeb
quelle
2
Aber wird das nicht die Höhe reparieren? Ich brauche die Höhe, um mit dem Inhalt übereinzustimmen.
oshirowanen
1

In meinem Fall habe ich eine ähnliche Lösung wie JP Hellemons gefunden , bei der ich die Höhe des Platzhalters (mit ! Wichtig ) auf benutzerdefiniert erzwinge und auch die Sichtbarkeit mit Hintergrund einstelle, um Änderungen für mich selbst zu sehen (Sie können Ihren Platzhalter auch so gestalten, wie Sie möchten ).

Dies funktioniert auch mit display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px
user3780666
quelle