jQuery UI Beispiel - Ort (Dropfähig)
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 .
Die Standardfunktion
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")
.html ( "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>
akzeptiert
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")
.html ( "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>
Verhindern Sie die Ausbreitung
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")
.html ( "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")
.html ( "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>
Wiederherstellen ziehbar Lage
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")
.html ( "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>
Warenkorb Demo
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>
Einfache Foto-Manager
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 = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "Hohe Tatra Gipfel" width = "96" height = "72">
<a href="../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 = "../ 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"> 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 = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Climbing Plan" width = "96" height = "72">
<a href="../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 = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "an der Spitze der Kozi Kopka" width = "96" height = "72">
<a href="../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>
visuelles Feedback
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")
.html ( "Dropped!");
}
});
$ ( "# Draggable2") .draggable ();
$ ( "# Droppable2") .droppable ({
akzeptieren: "# draggable2",
activeClass: "ui-State-default",
Drop: function (event, ui) {
$ (This)
.addClass ( "ui-state-Highlight")
.find ( "p")
.html ( "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>