Najlepszy samouczek jQuery UI przykład - sortowania (Sortable) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,Lista Connection,Zakładka Lista Connection,Opóźnienie startu,Jest on wyświetlany w postaci siatki,Umieść zastępczy,Przetwarzanie pusta lista,Włączeń / wykluczeń wpis,Składniki portal (Portlets),
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) .
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>
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>
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óź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>
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>
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>
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ć pl </ li> <Li class = "ui-state-default"> pl 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 pl </ li> <Li class = "ui-state-highlight"> pl 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>
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>
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>