Beispielreferenzhttp://jsfiddle.net/KyleMit/Geupm/2/ (Diese Website erfordert FQ, um den Effekt zu sehen)
Tatsächlich handelt es sich um eine erweiterte Version des offiziellen Warenkorb-Drag-and-Drop-Beispiels von jqueryUI, das beim Ziehen eine Sortierung hinzufügt
Dies ist HTML-Code
Lolcat Shirt
Buckit Shirt
Zebra gestreift
iPhone
iPod
Fügen Sie hier Ihre Artikel hinzu
Dies ist der JS-Code, der so eingestellt ist, dass er sortiert werden kann. Der orangefarbene Codeteil ist nicht sehr verständlich und scheint nutzlos
Code kopieren
Der Code lautet wie folgt:
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: „body“,
Helfer: „klonen“,
connectToSortable: „#cart ol“
});
$("#cart ol").sortable({
Elemente: „li:not(.placeholder)“,
connectWith: „li“,
Sortieren: Funktion () {
$(this).removeClass("ui-state-default");
},
over: function () {
//versteckt den Platzhalter, wenn sich das Element über dem sortierbaren
befindet
$(".placeholder").hide();
},
out: function () {
if ($(this).children(":not(.placeholder)").length == 0) {
//zeigt den Platzhalter erneut an, wenn keine Elemente in der Liste vorhanden sind
$(".placeholder").show();
}
}
});
});
另外值得一提的是
.ui-state-default貌似是拖拽时内置的一些类,对应的还有
ui-state-hover ist eine funktionsfähige Lösung 🎜>
以上就是关于jQueryUI中拖拽排序问题的分析了, 希望大家能够喜欢.