jQuery UI Beispiel - Sortierung (sortierbar)
Verwenden Sie die Maus, um die sortierte Liste oder Gitterelemente anzupassen.
Für weitere Details über die sortierbare Interaktion finden Sie in der API - Dokumentation sortierbar Widgets (sortierbar das Widget) .
Die Standardfunktion
Sortable Funktion ist auf jedem DOM-Element aktiviert. Klicken Sie auf und ziehen Sie die Maus in die Liste der Elemente eines neuen Standorts, werden andere Elemente automatisch angepasst werden. Standardmäßig sortierbar jeder Eintrag Shared draggable Attribut.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Die Standardfunktion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable li {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
#sortable li Spanne {position: absolute; margin-left: -1.3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortierbar">
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 1 </ li>
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 2 </ li>
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 3 </ li>
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 4 </ li>
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 5 </ li>
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 6 </ li>
<Li class = "ui-state-default"> <span class = "ui-Symbol ui-icon-arrowthick-2-ns"> </ span> Artikel 7 </ li>
</ Ul>
</ Body>
</ Html>
Verbindungsliste
Durch die connectWith eine Auswahloption vorbei eine Liste der Elemente in der sortierten Liste in eine andere zu bringen, und umgekehrt. Der einfachste Weg ist mit einer Liste aller relevanten Gruppen einer CSS - Klasse, und dann die Klasse in der sortierbare Funktion übergeben (zB connectWith: '.myclass' ).
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Verbindungsliste </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "connectedSortable">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default"> Artikel 2 </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
<Li class = "ui-State-default"> Punkt 5 </ li>
</ Ul>
<Ul id = "sortable2" class = "connectedSortable">
<Li class = "ui-state-Highlight"> Artikel 1 </ li>
<Li class = "ui-state-Highlight"> Artikel 2 </ li>
<Li class = "ui-state-Highlight"> Punkt 3 </ li>
<Li class = "ui-state-Highlight"> Punkt 4 </ li>
<Li class = "ui-state-Highlight"> Punkt 5 </ li>
</ Ul>
</ Body>
</ Html>
Verbindungsliste Registerkarte
Durch die Spitze der Liste Elemente in die entsprechende Registerkarte, indem eine Liste der Elemente in der sortierten Liste in eine andere zu bringen, und umgekehrt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Registerkarte Verbindungsliste </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
var $ tabs = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "ul: erste li", $ Tabs) .droppable ({
nehmen: ".connectedSortable li",
hoverclass: "ui-state-schweben",
Drop: function (event, ui) {
var $ item = $ (this);
var $ list = $ ($ item.find ( "a") .attr ( "href"))
.find ( ".connectedSortable");
ui.draggable.hide ( "langsam", function () {
$ Tabs.tabs ( "Option", "aktiv", $ tab_items.index ($ item));
$ (Diese) .appendTo ($ list) .show ( "slow");
});
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
</ Ul>
<Div id = "tabs-1">
<Ul id = "sortable1" class = "connectedSortable ui-Helfer-Reset">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default"> Artikel 2 </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
<Li class = "ui-State-default"> Punkt 5 </ li>
</ Ul>
</ Div>
<Div id = "Tabs-2">
<Ul id = "sortable2" class = "connectedSortable ui-Helfer-Reset">
<Li class = "ui-state-Highlight"> Artikel 1 </ li>
<Li class = "ui-state-Highlight"> Artikel 2 </ li>
<Li class = "ui-state-Highlight"> Punkt 3 </ li>
<Li class = "ui-state-Highlight"> Punkt 4 </ li>
<Li class = "ui-state-Highlight"> Punkt 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Verzögerter Start
Verzögert durch die Zeitverzögerung und Abstand, um ein versehentliches Art zu verhindern. Durch die delay Millisekunden Option muss vor dem Start der Widerstand der Art eingestellt werden. Mit distance Pixel Option muss vor dem Start der Widerstand der Art eingestellt werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - verzögerten Start </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; Zoom: 1;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
Verzögerung: 300
});
$ ( "# Sortable2") .sortable ({
Entfernung: 15
});
$ ( "Li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> Zeitverzögerung 300ms: </ h3>
<Ul id = "sortable1">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default"> Artikel 2 </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
</ Ul>
<H3 class = "docs"> Entfernung Verzögerung 15px: </ h3>
<Ul id = "sortable2">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default"> Artikel 2 </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
</ Ul>
</ Body>
</ Html>
Es wird als ein Raster angezeigt
Lassen sortierbar Einträge als Raster dargestellt werden, so dass sie CSS mit den gleichen Abmessungen und der schwimmenden Anzeige verwenden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Anzeige ein Raster </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
#sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortierbar">
<Li class = "ui-state-default"> 1 </ li>
<Li class = "ui-State-default"> 2 </ li>
<Li class = "ui-State-default"> 3 </ li>
<Li class = "ui-State-default"> 4 </ li>
<Li class = "ui-State-default"> 5 </ li>
<Li class = "ui-State-default"> 6 </ li>
<Li class = "ui-State-default"> 7 </ li>
<Li class = "ui-State-default"> 8 </ li>
<Li class = "ui-State-default"> 9 </ li>
<Li class = "ui-State-default"> 10 </ li>
<Li class = "ui-State-default"> 11 </ li>
<Li class = "ui-State-default"> 12 </ li>
</ Ul>
</ Body>
</ Html>
Platzieren Sie einen Platzhalter
Wenn eine sortierbare Eintritt in eine neue Position ziehen, werden die anderen Einträge Raum für den Eintrag machen. Stellen Sie placeholder Übertragungsoption eine Klasse von leeren visuellen Stil zu definieren. Boolesche Werte forcePlaceholderSize Option , um die Größe des Platzhalter zu setzen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - platziert Platzhalter </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; Höhe: 1.5em;}
html> body #sortable li {height: 1.5em; line-height: 1.2em;}
.ui-state-Highlight {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
Platzhalter: "ui-state-Highlight"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortierbar">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default"> Artikel 2 </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
<Li class = "ui-State-default"> Punkt 5 </ li>
<Li class = "ui-State-default"> Artikel 6 </ li>
<Li class = "ui-State-default"> Artikel 7 </ li>
</ Ul>
</ Body>
</ Html>
Die Verarbeitung leere Liste
von Option wird false , um eine Liste der alle Einträge zu verhindern , werden in eine separate leere Liste gesetzt. Standardmäßig können sortierbar Einträge in eine leere Liste gesetzt werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Umgang mit leeren Liste </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2, # sortable3 {list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; Hintergrund: #Eee; padding: 5px; width: 143px;}
# Sortable1 li, # sortable2 li, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "ul"
});
$ ( "Ul.dropfalse") .sortable ({
connectWith: "UL",
dropOnEmpty: false
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "droptrue">
<Li class = "ui-State-default"> gesetzt werden kann .. </ li>
<Li class = "ui-state-default"> .. eine leere Liste </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
<Li class = "ui-State-default"> Punkt 5 </ li>
</ Ul>
<Ul id = "sortable2" class = "dropfalse">
<Li class = "ui-state-Highlight"> kann nicht platziert werden .. </ li>
<Li class = "ui-state-Highlight"> .. eine leere Liste </ li>
<Li class = "ui-state-Highlight"> Punkt 3 </ li>
<Li class = "ui-state-Highlight"> Punkt 4 </ li>
<Li class = "ui-state-Highlight"> Punkt 5 </ li>
</ Ul>
<Ul id = "sortable3" class = "droptrue">
</ Ul>
<br style="clear:both">
</ Body>
</ Html>
Fügen / Eintrag ausschließen
Designated durch die items passieren ein jQuery - Selektor - Optionen , die Elemente sortiert werden können. Diese Option ist außerhalb des Projekts kann nicht bestellt werden, aber sie sind nicht gültig Ziel sortierbar Eintrag.
Wenn Sie bestimmte Einträge sortiert zu verhindern, zu cancel die Möglichkeit , einen jQuery - Selektor zu übergeben. Abgebrochen Eintrag ist noch gültig Sortierziel andere Einträge.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Einschließen / Ausschließen Eintrag </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; Zoom: 1;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 3px; width: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
Artikel: "li: nicht (.ui-state-disabled)"
});
$ ( "# Sortable2") .sortable ({
Abbrechen: ".ui-state-disabled"
});
$ ( "# Sortable1 li, # sortable2 li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> angeben, welche Elemente sind sortierbar: </ h3>
<Ul id = "sortable1">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default ui-State-disabled"> (Ich bin nicht sortierbar oder ein Drop-Ziel) </ li>
<Li class = "ui-State-default ui-State-disabled"> (Ich bin nicht sortierbar oder ein Drop-Ziel) </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
</ Ul>
<H3 class = "docs"> abbrechen, um (aber als Drop-Ziel): </ h3>
<Ul id = "sortable2">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default ui-State-disabled"> (Ich bin nicht sortierbar) </ li>
<Li class = "ui-State-default ui-State-disabled"> (Ich bin nicht sortierbar) </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
</ Ul>
</ Body>
</ Html>
Portalkomponenten (Portlets)
Aktivieren Portalkomponenten (gestylt div) als sortierbar und verwenden connectWith Option Kommunikation zwischen den Sortierspalten zu ermöglichen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Sortierung (Sortable) - Portalkomponenten (Portlets) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
body {
min-width: 520px;
}
.Column {
Breite: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-Toggle {
position: absolute;
Top: 50%;
rechts: 0;
margin-top: -8px;
}
.portlet-Inhalt {
padding: 0.4em;
}
.portlet-Platzhalter {
border: 1px punktierten schwarz;
margin: 0 1em 1em 0;
Höhe: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ".Column") .sortable ({
connectWith: ".Column",
Griff: ".portlet-header",
Abbrechen: ".portlet-Toggle",
Platzhalter: "Portlet-Platzhalter ui-Ecke-all"
});
$ ( ".portlet")
.addClass ( "ui-ui-Widget-Widget-Inhalte ui-Helfer-clearfix ui-Ecke-all")
.find ( ".portlet-header")
.addClass ( "ui-Widget-Header ui-Ecke-all")
.prepend ( "<span class = 'ui-Symbol ui-icon-minusthick Portlet-Toggle'> </ span>");
$ ( ".portlet-Toggle") .click (function () {
var icon = $ (this);
icon.toggleClass ( "ui-icon-minusthick ui-icon-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-content") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "Spalte">
<Div class = "Portlet">
<Div class = "Portlet-header"> Abonnieren </ div>
<Div class = "Portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "Portlet">
<Div class = "Portlet-header"> Nachrichten </ div>
<Div class = "Portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "Spalte">
<Div class = "Portlet">
<Div class = "Portlet-header"> Warenkorb </ div>
<Div class = "Portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "Spalte">
<Div class = "Portlet">
<Div class = "Portlet-header"> link </ div>
<Div class = "Portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "Portlet">
<Div class = "Portlet-header"> Bild </ div>
<Div class = "Portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Body>
</ Html>