jQuery UI przykład - sortowania (Sortable)
Użyj myszki, aby dostosować posortowanej listy lub siatki elementów.
Aby uzyskać więcej informacji na temat sortable interakcji można znaleźć w dokumentacji API sortowane przez widżety (Sortable Widget) .
Domyślną funkcją
Sortable funkcja jest włączona jakiegokolwiek elementu DOM. Kliknij i przeciągnij myszą do listy elementów nowej lokalizacji, inne przedmioty zostaną automatycznie skorygowane. Domyślnie sortowalny każdy wpis wspólny draggable atrybut.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - Domyślna funkcja </ 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 rozpiętość {position: absolute; margin-left: -1.3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 1 </ li>
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 2 </ li>
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 3 </ li>
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 4 </ li>
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 5 </ li>
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 6 </ li>
<Li class = "ui-state-default"> <span class = "icon-ui ui-icon-arrowthick-2-ns"> </ span> Artykuł 7 </ li>
</ Ul>
</ Body>
</ Html>
Lista Connection
Przez connectWith przechodzącą opcji wyboru, aby umieścić listę elementów na liście posortowanej do drugiego, i vice versa. Najłatwiej jest z listą wszystkich istotnych grup klasy CSS, a następnie przekazać do funkcji klasy sortable (np connectWith: '.myclass' ).
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - lista połączeń </ 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; pływaka: left; margin-right: 10px;}
# Sortable1 li, # sortable2 li {margin: 5px 0 5px 5px; padding: 5px; font-size: 1.2em; Szerokość: 120 pikseli;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = class "sortable1" = "connectedSortable">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default"> Punkt 2 </ li>
<Li class = "ui-state-default"> Pozycja 3 </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
<Li class = "ui-state-default"> Punkt 5 </ li>
</ Ul>
<Ul id = class "sortable2" = "connectedSortable">
<Li class = "ui-state-highlight"> Pozycja 1 </ li>
<Li class = "ui-state-highlight"> Punkt 2 </ li>
<Li class = "ui-state-highlight"> Pozycja 3 </ li>
<Li class = "ui-state-highlight"> Punkt 4 </ li>
<Li class = "ui-state-highlight"> Punkt 5 </ li>
</ Ul>
</ Body>
</ Html>
Zakładka Lista Connection
Poprzez umieszczenie na szczyt elementów listy do odpowiedniej zakładki umieścić listę elementów na liście posortowanej do drugiego, i vice versa.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - lista połączeń zakładka </ 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: 5px 0 5px 5px; padding: 5px; font-size: 1.2em; Szerokość: 120 pikseli;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
var $ tabs = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "ul: najpierw li", $ tabs) .droppable ({
Akceptujemy: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
var $ item = $ (this);
var $ list = $ ($ item.find ( "a") .attr ( "href"))
.find ( ".connectedSortable");
ui.draggable.hide ( "wolno", function () {
$ Tabs.tabs ( "opcja", "aktywny", $ tab_items.index ($ item));
$ (This) .appendTo ($ lista) .pokaż ( "slow");
});
}
});
});
</ Script>
</ Head>
<Body>
<div id = "wypustki">
<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-pomocnika-reset">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default"> Punkt 2 </ li>
<Li class = "ui-state-default"> Pozycja 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-pomocnika-reset">
<Li class = "ui-state-highlight"> Pozycja 1 </ li>
<Li class = "ui-state-highlight"> Punkt 2 </ li>
<Li class = "ui-state-highlight"> Pozycja 3 </ li>
<Li class = "ui-state-highlight"> Punkt 4 </ li>
<Li class = "ui-state-highlight"> Punkt 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Opóźnienie startu
Opóźnione przez opóźnienie czasu i odległości, aby zapobiec przypadkowemu sortowania. Przez delay milisekund opcja musi być ustawiony przed rozpoczęciem przeciągania podobnego. Przez distance pikseli opcja musi być ustawiona przed rozpoczęciem przeciągania w tym rodzaju.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - opóźniony 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: 5px 0 5px 5px; padding: 5px; font-size: 1.2em; width: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
Opóźnienie: 300
});
$ ( "# Sortable2") .sortable ({
odległość: 15
});
$ ( "Li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "Docs"> 300ms opóźnienie czasu: </ h3>
<Ul id = "sortable1">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default"> Punkt 2 </ li>
<Li class = "ui-state-default"> Pozycja 3 </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
</ Ul>
<H3 class = "Docs"> Opóźnienie odległość 15px: </ h3>
<Ul id = "sortable2">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default"> Punkt 2 </ li>
<Li class = "ui-state-default"> Pozycja 3 </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
</ Ul>
</ Body>
</ Html>
Jest on wyświetlany w postaci siatki
Niech oczyszczenia nasion wpisy są wyświetlane w postaci siatki, tak aby użyć CSS o tych samych wymiarach i wyświetlacza pływającego.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - wyświetla siatkę </ 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; Szerokość: 450 pikseli;}
#sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; wysokość: 90px; font-size: 4em; text-align: center;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<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>
Umieść zastępczy
Podczas przeciągania sortable wejście do nowej lokalizacji, pozostałe pozycje będą zrobić miejsce na wejściu. Zapytaj placeholder opcję przesyłania zdefiniować klasę pustą stylu wizualnym. Wartości logiczne forcePlaceholderSize opcję, aby ustawić rozmiar zastępczy.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - umieszczone zastępczy </ 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: 5px 0 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em;}
html> #sortable ciała li {height: 1.5em; line-height: 1.2em;}
.ui-state-highlight {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
zastępczy: "ui-state-highlight"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default"> Punkt 2 </ li>
<Li class = "ui-state-default"> Pozycja 3 </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
<Li class = "ui-state-default"> Punkt 5 </ li>
<Li class = "ui-state-default"> Pozycja 6 </ li>
<Li class = "ui-state-default"> Punkt 7 </ li>
</ Ul>
</ Body>
</ Html>
Przetwarzanie pusta lista
przez Opcja jest ustawiona false , aby zapobiec listę wszystkich wpisów są umieszczane w oddzielnej liście pusty. Domyślnie oczyszczenia nasion wpisy mogą być wprowadzane do pustej listy.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - obsługa pustą listę </ 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; pływaka: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
# Sortable1 li, # sortable2 li, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; Szerokość: 120 pikseli;}
</ Style>
<Script>
$ (Function () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "ul"
});
$ ( "Ul.dropfalse") .sortable ({
connectWith: "ul"
dropOnEmpty: false
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = class "sortable1" = "droptrue">
<Li class = "ui-state-default"> można umieścić .. </ li>
<Li class = "ui-state-default"> .. pustą listą </ li>
<Li class = "ui-state-default"> Pozycja 3 </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
<Li class = "ui-state-default"> Punkt 5 </ li>
</ Ul>
<Ul id = class "sortable2" = "dropfalse">
<Li class = "ui-state-highlight"> nie może być umieszczony .. </ li>
<Li class = "ui-state-highlight"> .. pustą listą </ li>
<Li class = "ui-state-highlight"> Pozycja 3 </ li>
<Li class = "ui-state-highlight"> Punkt 4 </ li>
<Li class = "ui-state-highlight"> Punkt 5 </ li>
</ Ul>
<Ul id = class "sortable3" = "droptrue">
</ Ul>
style="clear:both"> <br
</ Body>
</ Html>
Włączeń / wykluczeń wpis
Wyznaczony przez items zdać opcje selektor jQuery, które elementy mogą być sortowane. Ta opcja jest poza projekt nie można zamówić, ale nie są one ważne docelową sortowalny wpis.
Jeśli chcesz, aby zapobiec konkretne wpisy posortowane, aby cancel opcję przekazać selektor jQuery. Anulowane wpis jest nadal ważna sortowania docelowe inne wpisy.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sortowania (Sortable) - Włącz / Wyłącz wpis </ 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: 5px 0 5px 5px; padding: 3px; width: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
pozycje: "Li: nie (.ui-state-wyłączone)"
});
$ ( "# Sortable2") .sortable ({
anuluj ".ui-state-wyłączony"
});
$ ( "# Sortable1 li, # sortable2 li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<h3 class = ""> docs określić, które elementy są sortable: </ h3>
<Ul id = "sortable1">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default ui-state-wyłączony"> (nie jestem sortable lub cel drop) </ li>
<Li class = "ui-state-default ui-state-wyłączony"> (nie jestem sortable lub cel drop) </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
</ Ul>
<H3 class = ""> docs anulować zamówienie (ale jako cel rozwijanej): </ h3>
<Ul id = "sortable2">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default ui-state-wyłączony"> (nie jestem sortowalny) </ li>
<Li class = "ui-state-default ui-state-wyłączony"> (nie jestem sortowalny) </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
</ Ul>
</ Body>
</ Html>
Składniki portal (Portlets)
Włącz komponenty portal (stylizowany dz) jako sortable i używać connectWith opcję, aby umożliwić komunikację między kolumnami sortowania.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<title> jQuery UI sortowania (Sortable) - portal składniki (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 {
Szerokość: 170 pikseli;
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-przełącznik {
position: absolute;
top: 50%;
Prawo: 0;
margin-top: -8px;
}
.portlet-zawartość {
padding: 0.4em;
}
.portlet-zastępczy {
border: 1px przerywana czarna;
margin: 0 1em 1em 0;
height: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ".column") .sortable ({
connectWith: ".column"
rękojeść: ".portlet-header"
anuluj ".portlet-przełączanie"
zastępczy: "portlet-zastępczy ui-corner-all"
});
$ ( ".portlet")
.addClass ( "UI-widżet UI-widget-ui treść wspomagających clearfix ui-corner-all")
.find ( ".portlet-header")
.addClass ( "UI-widget-header ui-corner-all")
.prepend ( "<span class = 'ui ui-icon-icon-minusthick portlet-przełącznik'> </ span>");
$ ( ".portlet-Przełącz") .Kliknij (function () {
var ikona = $ (this);
icon.toggleClass ( "UI-icon-minusthick ui-icon-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-content") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "kolumna">
<Div class = "Portlet">
<Div class = "portlet-header"> Zapisz </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "Portlet">
<Div class = "portlet-header"> Wiadomości </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "kolumna">
<Div class = "Portlet">
<Div class = "portlet-header"> koszyk </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "kolumna">
<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"> Obrazek </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Body>
</ Html>