Najlepszy samouczek jQuery UI przykładem - miejsce (Droppable) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,Przyjęte,Zapobiec rozprzestrzenianiu,Przywracanie Draggable lokalizację,Koszyk Koszyk Demo,Proste Photo Manager,wizualnej,
Widgety, które można przeciągać do stworzenia docelowej.
Aby uzyskać więcej informacji na temat droppable interakcji można znaleźć w dokumentacji API można umieścić małe części (Droppable Widget) .
Włączenie funkcji droppable na dowolnym elemencie DOM, można przeciągnąć do tworzenia widgetów cel.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - 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> #draggable {width: 100px; height: 100px; padding: 0.5em; pływaka: lewej; margin: 10px 10px 10px 0;} #droppable {width: 150px; height: 150px; padding: 0.5em; pływaka: lewej; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable") .droppable ({ drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "p") ( "spadł!"); } }); }); </ Script> </ Head> <Body> <Div id = "przeciągany" class = "ui-widget-content"> <P> Proszę wysłać mi zaciągać do miejsca docelowego! </ P> </ Div> <Div id = "droppable" class = "ui-widget-header"> <P> Trzymać się stąd! </ P> </ Div> </ Body> </ Html>
Użyj accept
opcje kierowania droppable element, który akceptuje (lub grupy elementów).
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - zaakceptowane </ 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> #droppable {width: 150px; height: 150px; padding: 0.5em; pływaka: lewej; margin: 10px;} #draggable, # przeciągany-nonvalid {width: 100px; height: 100px; padding: 0.5em; pływaka: left; margin: 10px 10px 10px 0;} </ Style> <Script> $ (Function () { $ ( "#draggable, # Draggable-nonvalid") .draggable (); $ ( "#droppable") .droppable ({ Akceptujemy: "#draggable" activeClass: "ui-state-hover", hoverClass: "ui-state-aktywny", drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "p") ( "spadł!"); } }); }); </ Script> </ Head> <Body> <Div id = "przeciągany-nonvalid" class = "ui-widget-content"> <P> I nie można umieścić przeciągany </ p> </ Div> <Div id = "przeciągany" class = "ui-widget-content"> <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p> </ Div> <Div id = "droppable" class = "ui-widget-header"> <P> zaakceptować: "#draggable" </ p> </ Div> </ Body> </ Html>
Podczas używania zagnieżdżonych droppable - na przykład, można mieć drzewo można edytować strukturę katalogów z folderów i dokumentów węzłów - greedy
opcja jest ustawiona na wartość true, gdy przeciągany, aby zapobiec wprowadzaniu na węzłach podrzędnych (droppable), gdy propagacja zdarzenia.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - zapobiegania rozprzestrzenianiu </ 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> #draggable {width: 100px; height: 40px; padding: 0.5em; pływaka: lewej; margin: 10px 10px 10px 0;} #droppable, # droppable2 {width: 230px; height: 120 pikseli; padding: 0.5em; pływaka: lewej; margin: 10px;} # Droppable-wewnętrzna, # droppable2-wewnętrzna {width: 170 pikseli; height: 60px; padding: 0.5em; pływaka: left; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable, # Droppable-wewnętrzna") .droppable ({ activeClass: "ui-state-hover", hoverClass: "ui-state-aktywny", drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "> p") ( "spadł!"); return false; } }); $ ( "# Droppable2, # droppable2-wewnętrzna") .droppable ({ chciwi: prawda, activeClass: "ui-state-hover", hoverClass: "ui-state-aktywny", drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "> p") ( "spadł!"); } }); }); </ Script> </ Head> <Body> <Div id = "przeciągany" class = "ui-widget-content"> <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p> </ Div> <Div id = "droppable" class = "ui-widget-header"> <P> droppable zewnętrzna </ p> <Div id = "droppable-wewnętrzna" class = "ui-widget-header"> <P> droppable wewnętrzna (bez chciwy) </ p> </ Div> </ Div> <Div id = "droppable2" class = "ui-widget-header"> <P> droppable zewnętrzna </ p> <Div id = class "droppable2-wewnętrzna" = "ui-widget-header"> <P> droppable Wewnętrznego (z chciwym) </ p> </ Div> </ Div> </ Body> </ Html>
Podobnie jak w przypadku wartości logiczne revert
, gdy opcja przeciągany zatrzymać przeciąganie, powrót przeciągany (lub jego zastępca) do pierwotnej lokalizacji.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - redukcja przeciągany pozycji </ 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> #draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; pływaka: left; margin: 10px 10px 10px 0;} #droppable {width: 150px; height: 150px; padding: 0.5em; pływaka: lewej; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable ({Przywróć: "ważna"}); $ ( "# Draggable2") .draggable ({powróci: "nieważny"}); $ ( "#droppable") .droppable ({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "p") ( "umieszczona!"); } }); }); </ Script> </ Head> <Body> <Div id = "przeciągany" class = "ui-widget-content"> <P> redukcja gdy umieszczone na tarczy </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> <P> Gdy redukcja nie jest umieszczony na tarczy </ p> </ Div> <Div id = "droppable" class = "ui-widget-header"> <P> Proszę wprowadzić tutaj </ p> </ Div> </ Body> </ Html>
Pokazuje, jak wykorzystać panel składany, aby wyświetlić strukturę katalogów produktów, użyj przeciągnij i upuść, aby dodać produkty do koszyka, koszyk produkty są sortable.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - Koszyk Demo </ 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> h1 {padding: .2em; margin: 0;} #products {float: left; width: 500px; margin-right: 2em;} #cart {width: 200px; pływaka: left; margin-top: 1 em;} / * Definiowanie listy stylów, aby zmaksymalizować droppable * / #cart ol {margin: 0; padding: 1 em 0 1em 3em;} </ Style> <Script> $ (Function () { $ ( "#catalog") .accordion (); $ ( "#catalog Li") .draggable ({ appendTo: "ciało", pomocnika "klon" }); $ ( "#cart Ol") .droppable ({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", zaakceptować ": nie (.ui-sortowalny pomocniczych)" drop: function (event, ui) { $ (This) .find ( ".placeholder") .Wykręcić (); $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (this); } }). Sortable ({ pozycje: "Li: nie (.placeholder)" sort: function () { // Pobierz droppable interakcji z sortable dodanego wpisu // użyć connectWithSortable może rozwiązać ten problem, ale nie pozwala dostosować aktywny / hoverClass funkcji $ (this) .removeClass ( "ui-state-default"); } }); }); </ Script> </ Head> <Body> <div id = "produkty"> <H1 class = "ui-widget-header"> Produkty </ h1> <Div id = "katalog"> <H2> <a href="#"> Koszulki </a> </ h2> <Div> <Ul> <Li> Lolcat koszulka </ li> <Li> Cheezeburger koszulka </ li> <Li> Buckit koszulka </ li> </ Ul> </ Div> <H2> <a Torby href="#"> </a> </ h2> <Div> <Ul> <Li> Zebra w paski </ li> <Li> Black Leather </ li> <Li> Alligator Skóra </ li> </ Ul> </ Div> <H2> <a href="#"> Gadżety </a> </ h2> <Div> <Ul> <Li> iPhone </ li> <Li> iPod </ li> <Li> iPad </ li> </ Ul> </ Div> </ Div> </ Div> <Div id = "koszyk"> <H1 class = "ui-widget-header"> koszyk </ h1> <Div class = "ui-widget-content"> <Ol> <Li class = "zastępczy"> dodać produkty tutaj </ li> </ Ol> </ Div> </ Div> </ Body> </ Html>
Można przeciągać i upuszczać zdjęcia do Kosza lub kliknij ikonę kosza aby usunąć zdjęcie.
Można przeciągać i upuszczać zdjęcia w albumach lub kliknij ikonę Kosza, aby przywrócić zdjęcia.
Można powiększyć klikając na ikonę, aby wyświetlić jego powiększenie. jQuery UI Dialog (Okno) środki do modalnego okna.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - prosty menedżer zdjęć </ 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> #gallery {float: left; width: 65%; min-wysokość: 12em;} .gallery.custom-state-aktywne {background: #eee;} .gallery li {float: left; width: x 96 pikseli; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;} .gallery li h5 {margin: 0 0 0.4em; kursora: ruch;} .gallery li {float: right;} .gallery li a.ui-icon-zoomin {float: left;} .gallery li img {width: 100%; kursora: ruch;} #trash {float: right; width: 32%; min-wysokość: 18em; padding: 1%;} #trash h4 {line-height: 16px; margin: 0 0 0.4em;} #trash H4 .ui-ikona {float: left;} #trash .gallery h5 {display: none;} </ Style> <Script> $ (Function () { // To jest album i śmieci galerię var $ = $ ( "#gallery"), $ Kosz = $ ( "#trash"); // Uzależnić wprowadzanie album Draggable $ ( "li", $ galeria) .draggable ({ anuluj "a.ui-ikona", // kliknąć na ikonie nie uruchamia przeciągając powróci: "nieważne", // Kiedy nieużyte wpis powróci do swojego pierwotnego położenia skażenia: "dokument", pomocnika "klon" Kursor "przenieść" }); // Niech śmieci mogą być umieszczone, przyjął wpis album $ trash.droppable ({ Akceptujemy: "#gallery> li" activeClass: "ui-state-highlight" drop: function (event, ui) { deleteImage (ui.draggable); } }); // Sprawdź, album może być umieszczony, przyjął Kosz wpis $ gallery.droppable ({ Akceptujemy: "#trash li", activeClass: "custom-state-aktywny", drop: function (event, ui) { recycleImage (ui.draggable); } }); // Funkcja Obraz usuwać var recycle_icon = "<a href =" link / do / recycle / script / kiedy / my / mieć / js / off 'title =' przywrócony obraz 'class =' ui-ui-ikona ikona odświeżania " > przywracanie obrazu </a> "; Funkcja deleteImage ($ item) { $ Item.fadeOut (function () { var $ list = $ ( "UL", $ śmieci) .length? $ ( "Ul", $ śmieci): $ ( "<Ul class =" Galeria ui-pomocnika-reset '/> ") .appendTo ($ śmieci); $ Item.find ( "a.ui-icon-śmieci") .Wykręcić (); $ Item.append (recycle_icon) .appendTo (wykaz $) .fadeIn (function () { $ Pozycja .animate ({width: "48px"}) .find ( "img") .animate ({height: "36 px"}); }); }); } // Var trash_icon Image Restore = "<a href =" link / do / trash / script / kiedy / my / mieć / js / off 'title =' Usuń obraz 'class =' ui ui-icon-icon-śmieci " > usuń obrazu </a> "; Funkcja recycleImage ($ item) { $ Item.fadeOut (function () { $ Pozycja .find ( "a.ui-icon-Refresh") .Wykręcić () .END () .css ( "width", "x 96 pikseli") .append (trash_icon) .find ( "img") .css ( "wysokość", "72px") .END () .appendTo ($ galeria) .fadeIn (); }); } // Funkcja Podgląd obrazu, Demos ui.dialog stosowany jako viewLargerImage modalna funkcji okna ($ Link) { var src = $ link.attr ( "href"), title = $ link.siblings ( "img") .attr ( "alt"), Modal $ = $ ( "img [src $ = '" + src + "']"); if ($ modal.length) { $ Modal.dialog ( "open"); } Else { var img = $ ( "<img alt =" "+ nazwa +" "width =" 384 "height =" 288 "style =" display: none; padding: 8 pikseli; "/>") .attr ( "src" src) .appendTo ( "body"); setTimeout (function () { img.dialog ({ tytuł: tytuł, szerokość: 400, modalne: true }); }, 1); } } // Proxy ikona rozwiązywania zachowanie $ ( "ul.gallery> li") w czasie zdarzenia .Kliknij (function (zdarzenia) { var $ item = $ (this), $ Docelowa = $ (event.target); if ($ target.is ( "a.ui-icon-śmieci")) { deleteImage ($ item); } Else if ($ target.is ( "a.ui-icon-zoomin")) { viewLargerImage ($ docelowy); } Else if ($ target.is ( "a.ui-icon-Refresh")) { recycleImage ($ item); } return false; }); }); </ Script> </ Head> <Body> <Div class = "ui ui widget wspomagających clearfix"> <Ul id = "galeria" class = "Galeria ui ui pomocnika-reset wspomagających clearfix"> <Li class = "widget-ui ui-content-corner-tr"> <H5 class = "ui-widget-header"> Tatry </ h5> <Img src = "pl/ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Wysokie Tatry szczytowa" width = "96" height = "72"> <a href="/pl/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a> </ Li> <Li class = "widget-ui ui-content-corner-tr"> <H5 class = "ui-widget-header"> Wysokie Tatry 2 </ h5> <Img src = "pl/ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = "96" height = "72"> <a href="/pl/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a> </ Li> <Li class = "widget-ui ui-content-corner-tr"> <H5 class = "ui-widget-header"> Wysokie Tatry 3 </ h5> <Img src = "pl/ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Plan Climbing" width = "96" height = "72"> <a href="/pl/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a> </ Li> <Li class = "widget-ui ui-content-corner-tr"> <H5 class = "ui-widget-header"> Wysokie Tatry 4 </ h5> <Img src = "pl/ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "na szczycie Koziego Kopka" width = "96" height = "72"> <a href="/pl/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> kasowanie obrazów </a> </ Li> </ Ul> <Div id = "trash" class = "ui-widget-content ui-state-default"> <H4 class = "ui-widget-header"> <span class = "icon-ui ui-icon-śmieci"> Kosz </ span> Kosz </ h4> </ Div> </ Div> </ Body> </ Html>
Po najechaniu droppable lub gdy droppable jest aktywna (czyli akceptowalny przeciągany jest umieszczony na droppable) przy zmianie droppable wygląd. Użyj hoverClass
lub activeClass
opcję, aby określić klasę, odpowiednio.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI miejsce (Droppable) - wizualne sprzężenie zwrotne </ 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> #draggable, # draggable2 {width: 90px; height: 90px; padding: 0.5em; pływaka: left; margin: 10px 10px 10px 0;} #droppable, # droppable2 {width: 120 pikseli, wysokość: 120 pikseli; padding: 0.5em; pływaka: lewej; margin: 10px;} h3 {clear: left;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable") .droppable ({ hoverClass: "ui-state-hover", drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "p") ( "spadł!"); } }); $ ( "# Draggable2") .draggable (); $ ( "# Droppable2") .droppable ({ Akceptujemy: "# draggable2" activeClass: "ui-state-default", drop: function (event, ui) { $ (This) .addClass ( "ui-state-highlight") .find ( "p") ( "spadł!"); } }); }); </ Script> </ Head> <Body> <H3> Po najechaniu droppable gdy sprzężenie zwrotne: </ h3> <Div id = "przeciągany" class = "ui-widget-content"> <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p> </ Div> <Div id = "droppable" class = "ui-widget-header"> <P> Proszę wprowadzić tutaj </ p> </ Div> <H3> Po uruchomieniu Draggable zwrotne: </ h3> <Div id = "draggable2" class = "ui-widget-content"> <P> Proszę przeciągnąć mnie do miejsca przeznaczenia </ p> </ Div> <Div id = "droppable2" class = "ui-widget-header"> <P> Proszę wprowadzić tutaj </ p> </ Div> </ Body> </ Html>