Il miglior tutorial jQuery UI esempio - posto (droppable) Nel 2024, in questo tutorial puoi imparare La funzione di default,accettato,Prevenire la diffusione,Ripristinare posizione trascinabili,Carrello Demo,Semplice Photo Manager,feedback visivo,
Widget che possono essere trascinati per creare il bersaglio.
Per maggiori dettagli su l'interazione droppable, consultare la documentazione delle API può essere collocato piccole parti (droppable il Widget) .
Abilitazione funzione droppable su qualsiasi elemento DOM, e in grado di trascinare i widget per creare il bersaglio.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - La funzione di default </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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 ({ cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <Div id = "trascinabile" class = "ui-widget di-content"> <P> Si prega di inviarmi trascinati fino al luogo di destinazione! </ P> </ Div> <Div id = "droppable" class = "ui-widget di-header"> <P> Tenere fuori di qui! </ P> </ Div> </ Corpo> </ Html>
Utilizzare accept
opzioni di targeting elemento droppable che accetta (o gruppo di elementi).
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - accettato </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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, # trascinabili-nonvalid {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;} </ Style> <Script> $ (Function () { $ ( "#draggable, # Draggable-nonvalid") .draggable (); $ ( "#droppable") .droppable ({ accettare: "#draggable", activeClass: "ui-stato-hover", hoverClass: "ui-stato-attivo", cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <Div id = "trascinabile-nonvalid" class = "ui-widget di-content"> <P> Non può essere posizionato trascinabili </ p> </ Div> <Div id = "trascinabile" class = "ui-widget di-content"> <P> Si prega di trascinarmi verso la destinazione </ p> </ Div> <Div id = "droppable" class = "ui-widget di-header"> <P> accettare: '#draggable' </ p> </ Div> </ Corpo> </ Html>
Quando si utilizza droppable nested - per esempio, si può avere una struttura di directory ad albero modificabile con le cartelle e nodi di documenti - greedy
opzione è impostata su true quando il draggable per evitare di essere immessi sul nodi figli (droppable), quando la propagazione evento.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - prevenire la diffusione </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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;} # Droppable-interiore, # droppable2-interno {width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px;} </ Style> <Script> $ (Function () { $ ( "#draggable") .draggable (); $ ( "#droppable, # Droppable-interiore") .droppable ({ activeClass: "ui-stato-hover", hoverClass: "ui-stato-attivo", cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "> p") ( "Dropped!"); return false; } }); $ ( "# Droppable2, # droppable2-interiore") .droppable ({ avido: vero, activeClass: "ui-stato-hover", hoverClass: "ui-stato-attivo", cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "> p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <Div id = "trascinabile" class = "ui-widget di-content"> <P> Si prega di trascinarmi verso la destinazione </ p> </ Div> <Div id = "droppable" class = "ui-widget di-header"> <P> droppable esterno </ p> <Div id = "droppable-interiore" class = "ui-widget di-header"> <P> droppable interno (senza avido) </ p> </ Div> </ Div> <Div id = "droppable2" class = "ui-widget di-header"> <P> droppable esterno </ p> <Div id = "droppable2-interiore" class = "ui-widget di-header"> <P> droppable interno (con avida) </ p> </ Div> </ Div> </ Corpo> </ Html>
Come con valori booleani revert
quando l'opzione trascinabili per fermare il trascinamento, tornare trascinabili (o il suo assistente) per la posizione originale.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - Riduzione posizione trascinabili </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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: "valido"}); $ ( "# Draggable2") .draggable ({tornare: "non valido"}); $ ( "#droppable") .droppable ({ activeClass: "ui-stato-default", hoverClass: "ui-stato-hover", cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "p") ( "posta!"); } }); }); </ Script> </ Head> <Body> <Div id = "trascinabile" class = "ui-widget di-content"> <P> riduzione, quando sono immessi sul target </ p> </ Div> <Div id = "draggable2" class = "ui-widget di-content"> <P> Quando la riduzione non è immesso sul bersaglio </ p> </ Div> <Div id = "droppable" class = "ui-widget di-header"> <P> Si prega di inserire qui </ p> </ Div> </ Corpo> </ Html>
Viene illustrato come utilizzare il pannello pieghevole per visualizzare prodotto struttura delle directory, utilizzare il drag and drop per aggiungere i prodotti al carrello della spesa, carrello della spesa prodotti sono ordinabili.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - Carrello Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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;} / * Definire l'elenco degli stili di massimizzare * droppable / #cart ol {margin: 0; padding: 0 1em 1em 3em;} </ Style> <Script> $ (Function () { $ ( "#catalog") .accordion (); $ ( "#catalog Li") .draggable ({ appendTo: "corpo", aiutante: "clone" }); $ ( "#cart Ol") .droppable ({ activeClass: "ui-stato-default", hoverClass: "ui-stato-hover", accettare: ": non (.ui-ordinabile-helper)", cadere: la funzione (evento, ui) { $ (This) .find ( ".placeholder") .Remove (); $ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (questo); } }). Ordinabili ({ voci: "Li: non (.placeholder)", Ordina: function () { // Ottiene il droppable interagire con scheda secondaria ordinabile // utilizzare connectWithSortable può risolvere questo problema, ma non consente di personalizzare l'attiva / hoverClass opzione $ (this) .removeClass ( "ui-stato-default"); } }); }); </ Script> </ Head> <Body> <id = "prodotti" div> <Class = H1 "ui-widget di-header"> Prodotti </ h1> <Div id = "catalogo"> <H2> <a href="#"> T-shirt </a> </ h2> <Div> <Ul> <LI> Camicie Lolcat </ li> <LI> Cheezeburger shirt </ li> <LI> Buckit shirt </ li> </ Ul> </ Div> <H2> <a Borse href="#"> </a> </ h2> <Div> <Ul> <LI> zebra a strisce </ li> <LI> Pelle Nera </ li> <LI> pelle di alligatore </ li> </ Ul> </ Div> <H2> <a href="#"> Gadget </a> </ h2> <Div> <Ul> <LI> iPhone </ li> <LI> iPod </ li> <LI> iPad </ li> </ Ul> </ Div> </ Div> </ Div> <Div id = "carrello"> <Class = H1 "ui-widget di-header"> carrello </ h1> <Div class = "ui-widget di-content"> <Ol> <Li class = "segnaposto"> aggiungere prodotti qui </ li> </ Ol> </ Div> </ Div> </ Corpo> </ Html>
È possibile trascinare le foto nel Cestino oppure fare clic sull'icona del cestino per eliminare le foto.
È possibile trascinare e rilasciare le foto in album o fare clic sull'icona di riciclo per ripristinare le foto.
È possibile ingrandire cliccando sull'icona per visualizzare l'immagine ingrandita. jQuery UI Dialog (finestra) significa per la finestra modale.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - semplice gestore di foto </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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-stato-attiva {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; cursore: spostare;} .gallery li a {float: right;} .gallery li a.ui-icon-zoomin {float: left;} .gallery li img {width: 100%; cursore: spostare;} #trash {float: right; width: 32%; min-height: 18em; padding: 1%;} #trash h4 {line-height: 16px; margin: 0 0 0.4em;} #trash h4 .ui-icona {float: left;} #trash .gallery h5 {display: none;} </ Style> <Script> $ (Function () { // Questo è un album e spazzatura var $ galleria = $ ( "#gallery"), $ Trash = $ ( "#trash"); // Fare la voce album trascinabile $ ( "li", $ galleria) .draggable ({ annullare: "a.ui-icona", // cliccare su un'icona non iniziare a trascinare tornare: "non valido", // Quando unplaced, la voce tornerà alla sua posizione di contenimento originale: "documento", aiutante: "clone", cursore: "muoversi" }); // Lascia il cestino può essere posizionato, ha accettato l'ingresso album $ trash.droppable ({ accettare: "#gallery> li", activeClass: "ui-stato-highlight", cadere: la funzione (evento, ui) { Elimina immagine (ui.draggable); } }); // Fare un album può essere collocato, accettato il Cestino di entrata $ gallery.droppable ({ accettare: "#trash li", activeClass: "custom-stato-attivo", cadere: la funzione (evento, ui) { recycleImage (ui.draggable); } }); // Immagine eliminare la funzione var recycle_icon = "<a href = 'Link / a / riciclo / script / quando / ci / Hanno / js / off' title = 'immagine restaurata' class = 'ui ui-icon-icon-refresh' > ripristino immagine </a> "; Funzione Elimina immagine ($ item) { $ Item.fadeOut (function () { var $ list = $ ( "ul", $ spazzatura) .length? $ ( "UL", $ spazzatura): $ ( "<Ul class = 'galleria ui-helper-reset' />") .appendTo ($ spazzatura); $ Item.find ( "a.ui-icon-trash") .Remove (); $ Item.append (recycle_icon) .appendTo ($ lista) .fadeIn (function () { $ Articolo .animate ({width: "48px"}) .find ( "img") .animate ({height: "36px"}); }); }); } // Image Restore var trash_icon = "<a href = 'Link / a / trash / script / quando / ci / Hanno / js / off' title = 'Rimuovi immagine' class = 'ui ui-icon-icon-spazzatura' > eliminare l'immagine </a> "; Funzione recycleImage ($ item) { $ Item.fadeOut (function () { $ Articolo .find ( "a.ui-icon-refresh") .Rimuovere () .end () .css ( "larghezza", "96px") .Append (trash_icon) .find ( "img") .css ( "altezza", "72px") .end () .appendTo ($ galleria) .fadeIn (); }); } // Immagine funzione Anteprima Grandi ui.dialog usato come una funzione finestra modale viewLargerImage ($ link) { var src = $ link.attr ( "href"), title = $ link.siblings ( "img") .attr ( "alt"), $ Modale = $ ( "img [src = $ '" + src + "']"); if ($ modal.length) { $ Modal.dialog ( "aperto"); } Else { var img = $ ( "<img alt = '" + titolo + "' = larghezza '384' height = '288' style = 'display: none; padding: 8px;' />") .attr ( "src", src) .appendTo ( "corpo"); setTimeout (function () { img.dialog ({ Titolo: titolo, larghezza: 400, modal: true }); }, 1); } } // Proxy icona risolvere comportamento $ ( "ul.gallery> Li") attraverso l'evento .Click (function (evento) { var $ item = $ (this), $ Target = $ (event.target); if ($ target.is ( "a.ui-icon-trash")) { Elimina immagine ($ 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-widget di ui-helper-clearfix"> <Ul id = "galleria" class = "galleria ui-helper-reset ui-helper-clearfix"> <Li class = "ui-widget di contenuto ui-angolo-TR"> <Class H5 = "ui-widget di-header"> Alti Tatra </ h5> <Img src = "it/ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Alti Tatra picco" width = "96" height = "72"> <a href="/it/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Visualizzazione ingrandita della </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> eliminare le immagini </a> </ Li> <Li class = "ui-widget di contenuto ui-angolo-TR"> <Class H5 = "ui-widget di-header"> Alti Tatra 2 </ h5> <Img src = "it/ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = "96" height = "72"> <a href="/it/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Visualizzazione ingrandita della </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> eliminare le immagini </a> </ Li> <Li class = "ui-widget di contenuto ui-angolo-TR"> <Class H5 = "ui-widget di-header"> Alti Tatra 3 </ h5> <Img src = "it/ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Climbing Piano" width = "96" height = "72"> <a href="/it/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Visualizzazione ingrandita della </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> eliminare le immagini </a> </ Li> <Li class = "ui-widget di contenuto ui-angolo-TR"> <Class H5 = "ui-widget di-header"> Alti Tatra 4 </ h5> <Img src = "it/ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "nella parte superiore della Kozi Kopka" width = "96" height = "72"> <a href="/it/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Visualizzazione ingrandita della </a> <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> eliminare le immagini </a> </ Li> </ Ul> <Div id = "trash" class = "ui-widget di contenuto ui-stato-default"> <Class H4 = "ui-widget di-header"> <span class = "ui ui-icon-icon-trash"> Cestino </ span> Cestino </ h4> </ Div> </ Div> </ Corpo> </ Html>
Quando si libra sopra droppable, o quando droppable è attivato (ad esempio, un trascinabili accettabile è posto sul droppable) quando si cambia aspetto droppable. Utilizzare hoverClass
o activeClass
opzione per specificare la classe, rispettivamente.
<! Html Doctype> <Html lang = "it"> <Head> <META charset = "utf-8"> <Title> jQuery UI posto (droppable) - feedback visivo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script> <Src = "script // 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-stato-hover", cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "p") ( "Dropped!"); } }); $ ( "# Draggable2") .draggable (); $ ( "# Droppable2") .droppable ({ accettare: "# draggable2", activeClass: "ui-stato-default", cadere: la funzione (evento, ui) { $ (Questo) .addClass ( "ui-stato-highlight") .find ( "p") ( "Dropped!"); } }); }); </ Script> </ Head> <Body> <H3> Quando si libra sopra droppable quando il feedback: </ h3> <Div id = "trascinabile" class = "ui-widget di-content"> <P> Si prega di trascinarmi verso la destinazione </ p> </ Div> <Div id = "droppable" class = "ui-widget di-header"> <P> Si prega di inserire qui </ p> </ Div> <H3> Quando viene attivato un feedback trascinabili: </ h3> <Div id = "draggable2" class = "ui-widget di-content"> <P> Si prega di trascinarmi verso la destinazione </ p> </ Div> <Div id = "droppable2" class = "ui-widget di-header"> <P> Si prega di inserire qui </ p> </ Div> </ Corpo> </ Html>