jQuery UI Beispiel - Ziehen (dragfähig)
Unter Berücksichtigung der Maus das Element zu bewegen.
Für weitere Details über die ziehbar Interaktion finden Sie in der Dokumentation API ziehen und Widgets ablegen können (die Ziehbare das Widget) .
Die Standardfunktion
Aktivieren ziehbar Funktion auf jedem DOM-Element. Durch Klicken und Ziehen mit der Maus im Ansichtsfenster das ziehbar Objekt zu bewegen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - 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: 150px; height: 150px; padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-Widget-content">
<P> Bitte ziehen Sie mich! </ P>
</ Div>
</ Body>
</ Html>
Automatisches Scrollen
Automatisches Scrollen durch das Dokument, wenn die ziehbar aus dem Bildfenster verschoben. Stellen Sie die scroll - Option auf true automatische Scrollen zu ermöglichen, Feinabstimmung, die Scroll - Geschwindigkeit , wenn sie durch den Trigger Scrollen scrollSensitivity und scrollSpeed Einstellmöglichkeiten.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - Automatisches Scrollen </ 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, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Blättern: true});
$ ( "# Draggable2") .draggable ({blättern: true, scrollSensitivity: 100});
$ ( "# Draggable3") .draggable ({blättern: true, Scrollgeschwindigkeit: 100});
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-Widget-content">
<P> Rolle auf true gesetzt ist, wird die Standardeinstellung </ p>
</ Div>
<Div id = "draggable2" class = "ui-Widget-content">
<P> scrollSensitivity bis 100 </ p>
</ Div>
<Div id = "draggable3" class = "ui-Widget-content">
<P> Scrollgeschwindigkeit bis 100 </ p>
</ Div>
<Div style = "height: 5000px; width: 1px;"> </ div>
</ Body>
</ Html>
Constrained Bewegung
Ziehbare Bereich durch die Grenze definiert, um die Bewegung jedes ziehbar zu beschränken. Eingestellt axis Optionen ziehbar Pfad für die x-Achse oder y-Achse oder zu begrenzen containment Option ein Mutter DOM - Element oder eine jQuery Selektor, wie angeben "Dokument. '.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - eingeschränkte Bewegung </ 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: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable, # draggable2 {margin-bottom: 20px;}
#draggable {cursor: n-resize;}
# Draggable2 {cursor: e-resize;}
# Containment-Wrapper {width: 95%; height: 150px; border: 2px feste #ccc; padding: 10px;}
h3 {clear: left;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Achse: "y"});
$ ( "# Draggable2") .draggable ({Achse "x"});
$ ( "# Draggable3") .draggable ({Contain: "# Containment-Wrapper", blättern: false});
$ ( "# Draggable5") .draggable ({Contain: "Eltern"});
});
</ Script>
</ Head>
<Body>
<H3> Bewegung entlang der Achse Einschränkung: </ h3>
<Div id = "ziehbar" class = "ziehbar ui-Widget-content">
<P> Nur vertikale ziehen </ p>
</ Div>
<Div id = "draggable2" class = "ziehbar ui-Widget-content">
<P> Nur horizontalen Widerstands </ p>
</ Div>
<H3> oder eingeschränkte Bewegung in einem anderen DOM-Element: </ h3>
<Div id = "Containment-Wrapper">
<Div id = "draggable3" class = "ziehbar ui-Widget-content">
<P> Ich war in einem Feld gezwungen </ p>
</ Div>
<Div class = "ziehbar ui-Widget-content">
<P id = "draggable5" class = "ui-Widget-header"> I innerhalb des übergeordneten Element beschränkt war </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Cursorart
Wenn das Objekt Ziehen Sie den Cursor zu positionieren. Standardmäßig ist der Cursor in der Mitte Objekt gezogen. Verwenden Sie cursorAt Option , um die Position relativ zum anderen zu spezifizieren (angegeben in Bezug auf einen Pixelwert oben, rechts, unten, links von) ziehbar ist. ein gültiges CSS Cursor - Wert mit den Indem cursor Optionen , um das Aussehen des Cursors anpassen. Valid CSS Cursor Werte sind: Standard, verschieben, Zeiger, fadenkreuz, und so weiter.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - Cursor Style </ 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, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Cursor: "move", cursorAt: {top: 56, links: 56}});
$ ( "# Draggable2") .draggable ({cursor: "Fadenkreuz", cursorAt: {top: -5, links: -5}});
$ ( "# Draggable3") .draggable ({cursorAt: {bottom: 0}});
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-Widget-content">
<P> Ich bin immer in der Mitte (in Bezug auf die Maus) </ p>
</ Div>
<Div id = "draggable2" class = "ui-Widget-content">
<P> Mein Cursor links -5 und oben -5 </ p>
</ Div>
<Div id = "draggable3" class = "ui-Widget-content">
<P> Meine einzige Steuerung der Cursor-Position "unten" Werte </ p>
</ Div>
</ Body>
</ Html>
Verzögerter Start
Durch die delay Verzögerung Millisekunden starten Option Einstellungen ziehen. Mit distance Option wird der Cursor auf das angegebene Pixel gedrückt und ziehen Sie vor Drag & Drop ermöglicht.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - verzögerten Start </ 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: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Entfernung: 20});
$ ( "# Draggable2") .draggable ({Verzögerung: 1000});
$ ( ".ui-Ziehbare") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-Widget-content">
<P> Nur wenn ich einen 20 Pixel ziehen und begann zu ziehen </ p>
</ Div>
<Div id = "draggable2" class = "ui-Widget-content">
Nach <p> Egal, wie viel Abstand muss man ziehen und ziehen begann für 1000 ms warten </ p>
</ Div>
</ Body>
</ Html>
Ereignis
ziehbar auf start , drag und stop Ereignisse. Durch Ziehen des Start - Trigger - start - Ereignis ausgelöst bei Drag drag - Ereignis ausgelöst , wenn der Schleppanschlag stop - Ereignis.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - Events </ 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: 16em; padding: 0 1em;}
#draggable ul li {margin: 1em 0; padding: 0.5em 0;} * html #draggable ul li {height: 1%;}
#draggable ul li span.ui-Symbol {float: left;}
#draggable ul li span.count {font-weight: bold;}
</ Style>
<Script>
$ (Function () {
var $ start_counter = $ ( "# Event-Start"),
$ Drag_counter = $ ( "# Event-Drag"),
$ Stop_counter = $ ( "# Event-stop"),
Zählungen = [0, 0, 0];
$ ( "#draggable") .draggable ({
Start: function () {
Zählungen [0] ++;
updateCounterStatus ($ start_counter, zählt [0]);
},
Ziehen: function () {
Zählungen [1] ++;
updateCounterStatus ($ drag_counter, zählt [1]);
},
Stopp: function () {
Zählungen [2] ++;
updateCounterStatus ($ stop_counter, zählt [2]);
}
});
Funktion updateCounterStatus ($ event_counter, NEW_COUNT) {
// Aktualisiert ersten visuellen Zustand ...
if (! $ event_counter.hasClass ( "ui-state-Hover")) {
$ Event_counter.addClass ( "ui-state-schweben")
. .siblings () RemoveClass ( "ui-state-Hover");
}
// ... Dann aktualisieren Zahlen $ ( "span.count", $ event_counter) .text (NEW_COUNT);
}
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-ui-Widget-Widget-content">
<P> Bitte ziehen Sie mich, eine Kette von Ereignissen auslöst. </ P>
<Ul class = "ui-Helfer-Reset">
<Li id = "Ereignis-start" class = "ui-State-default ui-Ecke-all"> <span class = "ui-Symbol ui-icon-play"> </ span> "Start" genannt wird <span class = "count"> 0 </ span> x </ li>
<Li id = "Ereignis-Drag" class = "ui-State-default ui-Ecke-all"> <span class = "ui-Symbol ui-icon-arrow-4"> </ span> "ziehen" heißt <span class = "count"> 0 </ span> x </ li>
<Li id = "Ereignis-stop" class = "ui-State-default ui-Ecke-all"> <span class = "ui-Symbol ui-icon-stop"> </ span> "Stopp" genannt wird <span class = "count"> 0 </ span> x </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
Griffe
Ist nur zulässig, wenn sich der Cursor Teil ziehen auf ziehbar angegeben. Verwenden handle Option , um das Element (oder eine Gruppe von Elementen) angeben , der jQuery - Selektor für das gezogene Objekt.
Oder, wenn der Cursor angegebene Element (oder eine Gruppe von Elementen) innerhalb des zulässigen Drag ziehbar. Verwenden handle Option geben Sie die Drag - Funktion jQuery - Selektor abzubrechen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - Griffe </ 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: 0 10px 10px 0;}
#draggable p {cursor: move;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Griff: "p"});
$ ( "# Draggable2") .draggable ({Abbrechen: "p.ui-Widget-Header"});
$ ( "Div, p") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-Widget-content">
<P class = "ui-Widget-header"> können Sie nur innerhalb dieses Bereichs ziehen I </ p>
</ Div>
<Div id = "draggable2" class = "ui-Widget-content">
<P> Sie können mich nehmen um zu schleppen & hellip; </ p>
<P class = "ui-Widget-header"> & hellip; aber Sie können mich nicht ziehen </ p> In diesem Bereich
</ Div>
</ Body>
</ Html>
Wiederherstellungsort
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 Drag (Ziehbare) - Wiederherstellen Ort </ 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: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Revert: true});
$ ( "# Draggable2") .draggable ({zufällt: true, Helfer: "Klon"});
});
</ Script>
</ Head>
<Body>
<Div id = "ziehbar" class = "ui-Widget-content">
<P> Wiederherstellen </ p>
</ Div>
<Div id = "draggable2" class = "ui-Widget-content">
<P> Wiederherstellen Assistent </ p>
</ Div>
</ Body>
</ Html>
Am Raster ausrichten Elemente oder
Richten Sie ziehbar interne oder externe Grenzen DOM-Elemente. Die Verwendung von snap , snapMode (Innen, Außen, beide) und snapTolerance Option (bei ziehbar Abstand zwischen den Elementen in Pixeln ausgerichtet Calling).
Am Raster ausrichten oder ziehbar. Durch die grid Option können Sie die Gitterzellen (Pixel Höhe oder Breite).
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - Am Raster ausrichten Elemente oder </ 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: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em;}
.ui-Widget-Header p, .ui-Widget-Gehalt p {margin: 0;}
#snaptarget {height: 140px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Snap: true});
$ ( "# Draggable2") .draggable ({Snap: ".ui-Widget-Header"});
$ ( "# Draggable3") .draggable ({Snap: ".ui-Widget-Header", SNAPMODE: "äußere"});
$ ( "# Draggable4") .draggable ({Gitter: [20, 20]});
$ ( "# Draggable5") .draggable ({Gitter: [80, 80]});
});
</ Script>
</ Head>
<Body>
<Div id = "snaptarget" class = "ui-Widget-header">
<P> Ich bin ein zielausgerichtet </ p>
</ Div>
<br style="clear:both">
<Div id = "ziehbar" class = "ziehbar ui-Widget-content">
<P> Standard (Snap: true), für alle anderen ziehbar Element ausgerichtet </ p>
</ Div>
<Div id = "draggable2" class = "ziehbar ui-Widget-content">
<P> Ich habe gerade auf dem großen Feld ausgerichtet </ p>
</ Div>
<Div id = "draggable3" class = "ziehbar ui-Widget-content">
<P> Ich habe gerade ausgerichtet an den äußeren Rand des großen Kasten </ p>
</ Div>
<Div id = "draggable4" class = "ziehbar ui-Widget-content">
<P> I ausgerichtet auf ein 20 x 20 Raster </ p>
</ Div>
<Div id = "draggable5" class = "ziehbar ui-Widget-content">
<P> I ausgerichtet auf ein 80 x 80 Raster </ p>
</ Div>
</ Body>
</ Html>
visuelles Feedback
Feedback an den Benutzer, als Assistent der Art und Weise Objekte gezogen. helper Option akzeptiert "Original" Werte (mit den Cursor - ziehbar Objekte), "Klon" (mit dem Cursor ziehbar Kopie) oder eine Funktion gibt das DOM - Element (das Element während eines Drag den Cursor auf dem Display). Durch die opacity Option steuert Transparenz Assistent.
Zu unterscheiden, die eine ziehbar ist gezogen wird, lassen Sie ziehbar in Bewegung, um die Front zu halten. Wenn Sie ziehen, mit zIndex Option , um die Höhe des Assistenten z-Index zu setzen, oder die Verwendung stack Option , um sicherzustellen , dass , wenn Sie mit dem Ziehen aufhören, das letzte Element gezogen wird , erscheint immer an der Spitze der Gruppe mit anderen Projekten.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) - 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, # draggable3, #set div {width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable, # draggable2, # draggable3 {margin-bottom: 20px;}
#set {clear: both; float: left; width: 368px; height: 120px;}
p {clear: both; margin: 0; padding: 1em 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Helper: "Original"});
$ ( "# Draggable2") .draggable ({Opazität: 0,7, Helfer: "klonen"});
$ ( "# Draggable3") .draggable ({
Cursor: "bewegen",
cursorAt: {top: -12, links: -20},
Helfer: function (event) {
Return $ ( "<div class = 'ui-Widget-header"> Ich bin ein benutzerdefinierte Helfer </ div> ");
}
});
$ ( "#set Div") .draggable ({stapeln: "#set div"});
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> Helfer: </ h3>
<Div id = "ziehbar" class = "ui-Widget-content">
<P> Original </ p>
</ Div>
<Div id = "draggable2" class = "ui-Widget-content">
<P> durchscheinend Klon </ p>
</ Div>
<Div id = "draggable3" class = "ui-Widget-content">
<P> Benutzerdefinierte Assistent (in Verbindung mit cursorAt) </ p>
</ Div>
<H3 class = "docs"> Stack: </ h3>
<Div id = "set">
<Div class = "ui-Widget-content">
<P> Wir sind draggables .. </ p>
</ Div>
<Div class = "ui-Widget-content">
<P> .. es ist z-index wird automatisch gesteuert .. </ p>
</ Div>
<Div class = "ui-Widget-content">
<P> .. mit einem Stapel Optionen. </ P>
</ Div>
</ Div>
</ Body>
</ Html>
jQuery UI Ziehbare + Sortable
Ziehbar und Sortable nahtlose Interaktion.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Drag (Ziehbare) + Sort (Sortable) </ 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>
ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;}
li {margin: 5px; padding: 5px; width: 150px;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
zufällt: true
});
$ ( "#draggable") .draggable ({
connectToSortable: "#sortable",
Helfer: "klonen",
zufällt: "ungültig"
});
$ ( "Ul, li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul>
<Li id = "ziehbar" class = "ui-state-Highlight"> Bitte ziehen Sie mich </ li>
</ Ul>
<Ul id = "sortierbar">
<Li class = "ui-State-default"> Artikel 1 </ li>
<Li class = "ui-State-default"> Artikel 2 </ li>
<Li class = "ui-State-default"> Artikel 3 </ li>
<Li class = "ui-State-default"> Punkt 4 </ li>
<Li class = "ui-State-default"> Punkt 5 </ li>
</ Ul>
</ Body>
</ Html>