Das beste jQuery UI Beispiel - Ort (Dropfähig)-Tutorial im Jahr 2024. In diesem Tutorial können Sie Die Standardfunktion,akzeptiert,Verhindern Sie die Ausbreitung,Wiederherstellen ziehbar Lage,Warenkorb Demo,Einfache Foto-Manager,visuelles Feedback, lernen
Widgets, die das Ziel gezogen werden können zu erstellen.
Für weitere Details über die abwerfbaren Interaktion finden Sie in der API - Dokumentation von Kleinteilen (Dropfähig das Widget) platziert werden können .
Aktivieren der abwerfbaren Funktion auf jedem DOM-Element, und können Widgets ziehen Sie das Ziel zu erstellen.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (Dropfähig) - 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> #draggable {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;} #droppable {width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable") .droppable ({ Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <Div id = "ziehbar" class = "ui-Widget-content"> <P> Bitte senden Sie mir zum Ziel geschleppt! </ P> </ Div> <Div id = "abwerfbaren" class = "ui-Widget-header"> <P> Halten von hier! </ P> </ Div> </ Body> </ Html>
Verwenden Sie accept
Optionen abwerfbaren Element Targeting , die (oder eine Gruppe von Elementen) akzeptiert.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (dropfähig) - akzeptiert </ 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; float: left; margin: 10px;} #draggable, # ziehbar-ungültiges {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;} </ Style> <Script> $ (Function () { $ ( "#draggable, # Ziehbare-ungültiges") .draggable (); $ ( "#droppable") .droppable ({ nehmen: "#draggable", activeClass: "ui-state-schweben", hoverclass: "ui-state-aktiv", Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <Div id = "draggable-ungültiges" class = "ui-Widget-content"> <P> Ich kann nicht platziert ziehbar werden </ p> </ Div> <Div id = "ziehbar" class = "ui-Widget-content"> <P> Bitte ziehen Sie mich an das Ziel </ p> </ Div> <Div id = "abwerfbaren" class = "ui-Widget-header"> <P> akzeptieren: '#draggable' </ p> </ Div> </ Body> </ Html>
Wenn verschachtelte abwerfbaren mit - zum Beispiel, können Sie einen Baum bearbeitbaren Verzeichnisstruktur mit Ordnern und Dokumenten - Knoten haben - greedy
Option auf true gesetzt ist , wenn die ziehbar zu verhindern (abwerfbaren) auf die untergeordneten Knoten gesetzt werden , wenn die Ereignispropagierung.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (Dropfähig) - Verhinderung der Ausbreitung </ 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; float: left; margin: 10px 10px 10px 0;} #droppable, # droppable2 {width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px;} # Dropfähig-Innen, # droppable2-Innen {width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable, # Dropfähig-Innen") .droppable ({ activeClass: "ui-state-schweben", hoverclass: "ui-state-aktiv", Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "> p") ( "Dropped!"); return false; } }); $ ( "# Droppable2, # droppable2-Innen") .droppable ({ gierig: true, activeClass: "ui-state-schweben", hoverclass: "ui-state-aktiv", Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "> p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <Div id = "ziehbar" class = "ui-Widget-content"> <P> Bitte ziehen Sie mich an das Ziel </ p> </ Div> <Div id = "abwerfbaren" class = "ui-Widget-header"> <P> Externe abwerfbaren </ p> <Div id = "abwerfbaren-Innen" class = "ui-Widget-header"> <P> Interne abwerfbaren (ohne gierig) </ p> </ Div> </ Div> <Div id = "droppable2" class = "ui-Widget-header"> <P> Externe abwerfbaren </ p> <Div id = "droppable2-Innen" class = "ui-Widget-header"> <P> Interne abwerfbaren (mit gierigen) </ p> </ Div> </ Div> </ Body> </ Html>
Wie bei Boolesche Werte revert
, wenn ziehbar Option ziehen zu stoppen, kehren ziehbar (oder sein Assistent) an den ursprünglichen Speicherort.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (Dropfähig) - Reduktion ziehbar Position </ 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; float: left; margin: 10px 10px 10px 0;} #droppable {width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable ({Revert: "gültig"}); $ ( "# Draggable2") .draggable ({zurückkehren: "ungültig"}); $ ( "#droppable") .droppable ({ activeClass: "ui-State-default", hoverclass: "ui-state-schweben", Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "p") ( "platziert!"); } }); }); </ Script> </ Head> <Body> <Div id = "ziehbar" class = "ui-Widget-content"> <P> Reduktion, wenn auf dem Ziel platziert </ p> </ Div> <Div id = "draggable2" class = "ui-Widget-content"> <P> Wenn die Reduktion auf das Ziel nicht gesetzt </ p> </ Div> <Div id = "abwerfbaren" class = "ui-Widget-header"> <P> Bitte legen Sie hier </ p> </ Div> </ Body> </ Html>
Demonstriert, wie die Faltplatte zu verwenden, um Produktverzeichnisstruktur, per Drag & Drop hinzufügen Produkte in den Warenkorb, Warenkorb Produkte sind sortierbar anzuzeigen.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (dropfähig) - Warenkorb 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; float: left; margin-top: 1em;} / * Die Liste der Stile definieren abwerfbaren * zu maximieren / #cart ol {margin: 0; padding: 1em 0 1em 3em;} </ Style> <Script> $ (Function () { $ ( "#catalog") .accordion (); $ ( "#catalog Li") .draggable ({ appendTo: "Körper", Helfer: "Klon" }); $ ( "#cart Ol") .droppable ({ activeClass: "ui-State-default", hoverclass: "ui-state-schweben", nehmen: ": nicht (.ui sortierbare-Helfer)", Drop: function (event, ui) { $ (This) .find ( ".placeholder") .remove (); $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (this); } }). Sortable ({ Artikel: "li: nicht (.placeholder)", sort: function () { // Holen Sie sich das abwerfbaren mit sortierbar Eintragung in Wechselwirkung // connectWithSortable, um dieses Problem zu lösen, aber nicht erlauben Sie die aktive / hoverclass Option $ (this) .removeClass ( "ui-state-default") anzupassen; } }); }); </ Script> </ Head> <Body> <Div id = "Produkte"> <H1 class = "ui-Widget-header"> Produkte </ h1> <Div id = "Katalog"> <H2> <a href="#"> T-Shirts </a> </ h2> <Div> <Ul> <Li> Lolcat Hemd </ li> <Li> Cheezeburger Hemd </ li> <Li> Buckit Hemd </ li> </ Ul> </ Div> <H2> <a href="#"> Taschen </a> </ h2> <Div> <Ul> <Li> Zebra Striped </ li> <Li> Schwarz-Leder </ li> <Li> Alligatorleder </ li> </ Ul> </ Div> <H2> <a href="#"> Gadgets </a> </ h2> <Div> <Ul> <Li> iPhone </ li> <Li> iPod </ li> <Li> iPad </ li> </ Ul> </ Div> </ Div> </ Div> <Div id = "Warenkorb"> <H1 class = "ui-Widget-header"> Warenkorb </ h1> <Div class = "ui-Widget-content"> <Ol> <Li class = "Platzhalter"> hinzufügen Produkte hier </ li> </ Ol> </ Div> </ Div> </ Body> </ Html>
Sie können Fotos in den Papierkorb ziehen oder in den Papierkorb klicken können, Symbol, um die Fotos zu löschen.
Sie können Fotos in Alben oder klicken Sie auf das Recycling-Symbol per Drag & Drop Fotos wiederherzustellen.
Sie können auf das Symbol vergrößern, indem Sie auf ein größeres Bild zu sehen. jQuery UI-Dialog (Dialog) Mittel zum modalen Fenster.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (dropfähig) - einfache Foto-Manager </ 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-height: 12em;} .gallery.custom-state-aktiv {background: #EEE} .gallery li {float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;} .gallery li h5 {margin: 0 0 0.4em; Cursor: Bewegung;} .gallery li a {float: right;} .gallery li a.ui-icon-zoomin {float: left;} .gallery li img {width: 100%; Cursor: Bewegung;} #trash {float: right; width: 32%; min-height: 18em; padding: 1%;} #trash h4 {line-height: 16px; margin: 0 0 0.4em;} #trash h4 .ui-Symbol {float: left;} #trash .gallery h5 {display: none;} </ Style> <Script> $ (Function () { // Das ist ein Album und Müll var $ gallery = $ ( "#gallery"), $ Trash = $ ( "#trash"); Machen // das Album Eintrag ziehbar $ ( "li", $ Galerie) .draggable ({ Abbrechen: "a.ui-Symbol", // Klicken Sie auf ein Symbol nicht ziehen startet wieder her: "ungültig", // Wenn nicht platziert, wird der Eintrag in seine ursprüngliche Position Haltung wieder zurück: "Dokument", Helfer: "klonen", Cursor: "bewegen" }); // Lassen Sie kann der Müll platziert werden, akzeptiert das Album Eintrag $ trash.droppable ({ nehmen: "#gallery> li", activeClass: "ui-state-Highlight", Drop: function (event, ui) { Bild löschen (ui.draggable); } }); // Ein Album zu machen platziert werden können, nahm den Papierkorb Eintrag $ gallery.droppable ({ nehmen: "#trash li", activeClass: "custom-state-aktiv", Drop: function (event, ui) { recycleImage (ui.draggable); } }); // Bildfunktion var recycle_icon löschen = "<a href =" Link / to / Recycling / script / wann / wir / haben / js / off 'title =' wiederhergestellt Bild 'class =' ui-ui-Symbol-Symbol-Refresh ' > Bild </a> "wiederherzustellen; Funktion Bild löschen ($ item) { $ Item.fadeOut (function () { var $ list = $ ( "ul", $ Müll) .length? $ ( "Ul", $ Müll): $ ( "<Ul class = 'Galerie ui-Helfer-Reset" /> ") .appendTo ($ trash); $ Item.find ( "a.ui-icon-trash") .remove (); $ Item.append (recycle_icon) .appendTo ($ list) .fadeIn (function () { $ Artikel .animate ({width: "48px"}) .find ( "img") .animate ({height: "36px"}); }); }); } // Bild var trash_icon wiederherstellen = "<a href =" Link / to / trash / script / wann / wir / haben / js / off 'title =' Bild entfernen 'class =' ui-ui-Symbol-Symbol-trash ' > Bild </a> "löschen; Funktion recycleImage ($ item) { $ Item.fadeOut (function () { $ Artikel .find ( "a.ui-icon-Refresh") .remove () .end () CSS- ( "width", "96px") .append (trash_icon) .find ( "img") CSS- ( "Höhe", "72px") .end () .appendTo ($ Galerie) .fadeIn (); }); } // Bildvorschau-Funktion, Demos ui.dialog verwendet als modaler Fensterfunktion viewLargerImage ($ 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 =" "+ Titel +" 'width =' 384 'height =' 288 'style = "display: none; padding: 8px;' />") .attr ( "src", src) .appendTo ( "body"); setTimeout (function () { img.dialog ({ Titel: Titel, Breite: 400, modal: true }); }, 1); } } // Proxy Symbol Lösungsverhalten $ ( "ul.gallery> li") durch die Veranstaltung .click (function (event) { var $ item = $ (this), $ Ziel = $ (event.target); if ($ target.is ( "a.ui-icon-trash")) { Bild löschen ($ item); } Else if ($ target.is ( "a.ui-icon-zoomin")) { viewLargerImage ($ target); } Else if ($ target.is ( "a.ui-icon-Refresh")) { recycleImage ($ item); } return false; }); }); </ Script> </ Head> <Body> <Div class = "ui-ui-Widget-Helfer-clearfix"> <Ul id = "Galerie" class = "Galerie ui-Helfer-Reset-ui-Helfer-clearfix"> <Li class = "ui-Widget-Inhalt ui-Ecke-tr"> <H5 class = "ui-Widget-header"> Hohe Tatra </ h5> <Img src = "de/ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Hohe Tatra Gipfel" width = "96" height = "72"> <a href="/de/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Größere </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> löschen Bilder </a> </ Li> <Li class = "ui-Widget-Inhalt ui-Ecke-tr"> <H5 class = "ui-Widget-header"> Hohe Tatra 2 </ h5> <Img src = "de/ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = "96" height = "72"> <a href="/de/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Größere </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> löschen Bilder </a> </ Li> <Li class = "ui-Widget-Inhalt ui-Ecke-tr"> <H5 class = "ui-Widget-header"> Hohe Tatra 3 </ h5> <Img src = "de/ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Climbing Plan" width = "96" height = "72"> <a href="/de/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Größere </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> löschen Bilder </a> </ Li> <Li class = "ui-Widget-Inhalt ui-Ecke-tr"> <H5 class = "ui-Widget-header"> Hohe Tatra 4 </ h5> <Img src = "de/ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "an der Spitze der Kozi Kopka" width = "96" height = "72"> <a href="/de/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Größere </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> löschen Bilder </a> </ Li> </ Ul> <Div id = "trash" class = "ui-Widget-Inhalte ui-State-default"> <H4 class = "ui-Widget-header"> <span class = "ui-ui-Symbol-Symbol-trash"> Papierkorb </ span> Papierkorb </ h4> </ Div> </ Div> </ Body> </ Html>
Wenn über abwerfbaren schwebt, oder wenn abwerfbaren aktiviert wird (dh, eine akzeptable ziehbar auf dem abwerfbaren platziert), wenn abwerfbaren Aussehen zu verändern. Verwenden Sie hoverClass
oder activeClass
Option , um die Klasse zu spezifizieren sind.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Ort (Dropfähig) - visuelles Feedback </ 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; float: left; margin: 10px 10px 10px 0;} #droppable, # droppable2 {width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px;} h3 {clear: left;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable") .droppable ({ hoverclass: "ui-state-schweben", Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "p") ( "Dropped!"); } }); $ ( "# Draggable2") .draggable (); $ ( "# Droppable2") .droppable ({ akzeptieren: "# draggable2", activeClass: "ui-State-default", Drop: function (event, ui) { $ (This) .addClass ( "ui-state-Highlight") .find ( "p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <H3> Wenn über abwerfbaren schweben, wenn Feedback: </ h3> <Div id = "ziehbar" class = "ui-Widget-content"> <P> Bitte ziehen Sie mich an das Ziel </ p> </ Div> <Div id = "abwerfbaren" class = "ui-Widget-header"> <P> Bitte legen Sie hier </ p> </ Div> <H3> Wenn ziehbar Feedback aktiviert: </ h3> <Div id = "draggable2" class = "ui-Widget-content"> <P> Bitte ziehen Sie mich an das Ziel </ p> </ Div> <Div id = "droppable2" class = "ui-Widget-header"> <P> Bitte legen Sie hier </ p> </ Div> </ Body> </ Html>