jQuery UI esempio - posto (droppable)
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) .
La funzione di default
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")
.html ( "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>
accettato
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")
.html ( "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>
Prevenire la diffusione
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")
.html ( "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")
.html ( "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>
Ripristinare posizione trascinabili
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")
.html ( "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>
Carrello Demo
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>
Semplice Photo Manager
È 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 = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Alti Tatra picco" width = "96" height = "72">
<a href="../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 = "../ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = "96" height = "72">
<a href="../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 = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Climbing Piano" width = "96" height = "72">
<a href="../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 = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "nella parte superiore della Kozi Kopka" width = "96" height = "72">
<a href="../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>
feedback visivo
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")
.html ( "Dropped!");
}
});
$ ( "# Draggable2") .draggable ();
$ ( "# Droppable2") .droppable ({
accettare: "# draggable2",
activeClass: "ui-stato-default",
cadere: la funzione (evento, ui) {
$ (Questo)
.addClass ( "ui-stato-highlight")
.find ( "p")
.html ( "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>