jQuery UI przykład - przeciągnięcie (Draggable)
Umożliwienie myszki, aby przenieść element.
Aby uzyskać więcej informacji na temat Draggable interakcji można znaleźć w dokumentacji API można przeciągać i upuszczać widżety (The Draggable Widget) .
Domyślną funkcją
Włącz Draggable funkcji na dowolnym elemencie DOM. Klikając i przeciągając myszką w rzutni, aby przesunąć przeciągany obiekt.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Domyślna funkcja </ 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 = "przeciągany" class = "ui-widget-content">
<P> Proszę przeciągnąć mnie! </ P>
</ Div>
</ Body>
</ Html>
automatyczne przewijanie
Automatyczne przewijanie dokumentu, gdy przeciągany przeniesiony poza rzutni. Ustaw scroll opcji na wartość true, aby włączyć automatyczne przewijanie, dostrajających szybkość przewijania Podczas przewijania wyzwalania scrollSensitivity i scrollSpeed ustawiania opcji.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Automatyczne przewijanie </ 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; pływaka: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Przewiń: true});
$ ( "# Draggable2") .draggable ({przewijania: true, scrollSensitivity: 100});
$ ( "# Draggable3") .draggable ({przewijania: true, scrollSpeed: 100});
});
</ Script>
</ Head>
<Body>
<Div id = "przeciągany" class = "ui-widget-content">
<P> Przewijanie jest ustawiona na wartość true, ustawienie domyślne </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> scrollSensitivity 100 </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget-content">
<P> scrollSpeed 100 </ p>
</ Div>
<Div style = "height: 5000px; width: 1px;"> </ div>
</ Body>
</ Html>
ograniczony ruch
Powierzchnia przeciągany określa granicę, aby ograniczyć ruch każdego przeciąganie. Ustaw axis opcje, aby ograniczyć Draggable ścieżkę do osi x lub osi y lub containment opcji, aby określić nadrzędnego DOM element lub selektor jQuery, takich jak "dokumentu"..
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - ograniczony ruch </ 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; pływaka: lewej; margin: 0 10px 10px 0;}
#draggable, # draggable2 {margin-bottom: 20px;}
#draggable {cursor: n-resize;}
# Draggable2 {cursor: e-resize;}
# Ograniczanie-wrapper {width: 95%; height: 150px; border: 2px stałe #ccc; padding: 10px;}
h3 {clear: left;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Oś "y"});
$ ( "# Draggable2") .draggable ({oś "x"});
$ ( "# Draggable3") .draggable ({powstrzymywanie: "# powstrzymywanie-wrapper", przewiń: false});
$ ( "# Draggable5") .draggable ({powstrzymywanie: "rodzic"});
});
</ Script>
</ Head>
<Body>
<H3> ruch wzdłuż osi ograniczenia: </ h3>
<Div id = "przeciągany" class = "przeciągany ui-widget-content">
<P> Tylko pionowe drag </ p>
</ Div>
<Div id = "draggable2" class = "przeciągany ui-widget-content">
<P> Tylko poziome drag </ p>
</ Div>
<H3> lub ograniczony ruch w innym elemencie DOM: </ h3>
<Div id = "wrapper powstrzymywanie-">
<Div id = "draggable3" class = "przeciągany ui-widget-content">
<P> I został ograniczony w polu </ p>
</ Div>
<Div class = "przeciągany ui-widget-content">
<P id = "draggable5" class = "ui-widget-header"> I został zamknięty w elementu nadrzędnego </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Styl kursora
Podczas przeciągania obiektu w celu ustawienia kursora. Domyślnie kursor jest w środku przeciągany obiekt. Użyj cursorAt opcję, aby określić pozycję w stosunku do innych (określone w odniesieniu do wartości pikseli górnej, prawej, na dole, po lewej stronie) Draggable tych. Poprzez zapewnienie prawidłowej wartości kursora CSS z cursor opcji, aby dostosować wygląd kursora. Prawidłowe wartości kursora CSS to: default, przenoszenia, wskaźnik, celownik, i tak dalej.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Styl kursora </ 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; pływaka: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Kursora: "Move", cursorAt: {top: 56, w lewo: 56}});
$ ( "# Draggable2") .draggable ({cursor: "celownik", cursorAt: {top: -5, w lewo: -5}});
$ ( "# Draggable3") .draggable ({cursorAt: {bottom: 0}});
});
</ Script>
</ Head>
<Body>
<Div id = "przeciągany" class = "ui-widget-content">
<P> Jestem zawsze w środku (w odniesieniu do myszy) </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> mój kursor w lewo i do góry -5 -5 </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget-content">
<P> My tylko kontrolować położenie kursora 'bottom' wartości </ p>
</ Div>
</ Body>
</ Html>
Opóźnienie startu
Przez delay milisekund opóźnienia rozpoczęcia przeciągania ustawienia opcji. Przez distance opcją jest wciśnięty, a następnie przeciągnij kursor do określonego piksela przed zezwoleniem przeciągnij i upuść.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - opóźniony 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: 120 pikseli, wysokość: 120 pikseli; padding: 0.5em; pływaka: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Dystans: 20});
$ ( "# Draggable2") .draggable ({Opóźnienie: 1000});
$ ( ".ui-Draggable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "przeciągany" class = "ui-widget-content">
<P> Tylko kiedy przeciągnij 20 pikseli i zaczął przeciągać </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
Po <p> Nie ważne ile odległość trzeba przeciągnąć i przeciągnij zaczął czekać na 1000ms </ p>
</ Div>
</ Body>
</ Html>
wydarzenie
przeciągane na start , drag oraz stop wydarzeń. Przeciąganie startowy start zdarzenia, wyzwalane podczas przeciągania drag zdarzenia wyzwalane, gdy przeciągnij przystanek stop zdarzenia.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Wydarzenia </ 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 1 em;}
#draggable ul li {margin: 1 em 0; padding: 0.5em 0;} * html #draggable ul li {height: 1%;}
#draggable ul li span.ui-ikona {float: left;}
#draggable ul li span.count {font-weight: bold;}
</ Style>
<Script>
$ (Function () {
var $ start_counter = $ ( "# event-start"),
$ Drag_counter = $ ( "# zdarzenia drag"),
$ Stop_counter = $ ( "# event-stop"),
liczy = [0, 0, 0];
$ ( "#draggable") .draggable ({
start: function () {
Liczy [0] ++;
updateCounterStatus ($ start_counter, liczy [0]);
}
Przeciąganie: function () {
Liczy się [1] ++;
updateCounterStatus ($ drag_counter, liczy się [1]);
}
stop: function () {
Liczy się [2] ++;
updateCounterStatus ($ stop_counter, liczy [2]);
}
});
funkcjonować updateCounterStatus ($ event_counter, NEW_COUNT) {
// Aktualizacja pierwszy stan wizualny ...
if (! $ event_counter.hasClass ( "ui-state-hover")) {
$ Event_counter.addClass ( "ui-state-hover")
. .siblings () removeClass ( "ui-state-hover");
}
// ... Następnie zaktualizować numery $ ( "span.count", $ event_counter) .text (NEW_COUNT);
}
});
</ Script>
</ Head>
<Body>
<Div id = "przeciągany" class = "widget-ui ui-widget-content">
<P> Proszę przeciągnąć mnie, powodując łańcuch zdarzeń. </ P>
<Class Ul = "ui-pomocnika-reset">
<Li id = class "event-start" = "ui-state-default ui-corner-all"> <span class = "ui-ikony ui-icon-play"> </ span> "start", nazywa się <span class = "count"> 0 </ span> x </ li>
<Li id = "event-drag" class = "wszystko ui-corner ui-state-default"> <span class = "ui-ikony ui-icon-strzałka-4"> </ span> "drag" nazywa <span class = "count"> 0 </ span> x </ li>
<Li id = "event-stop" class = "ui-state-default ui-corner-all"> <span class = "ui-ikony ui-icon-stop"> </ span> "stop", nazywa się <span class = "count"> 0 </ span> x </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
uchwyty
Jest dopuszczalne tylko wtedy, gdy część Kursor określony opór na przeciąganie. Za pomocą handle opcję, aby określić element (lub grupy elementów) selektora jQuery dla przeciągany obiekt.
Albo gdy kursor określony element (lub grupa elementów) w dozwolonym przeciągnij przeciągany. Za pomocą handle opcji do określenia anulować funkcję przeciągnij selektor jQuery.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Uchwyty </ 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; pływaka: left; margin: 0 10px 10px 0;}
#draggable p {cursor: ruch;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Uchwyt: "p"});
$ ( "# Draggable2") .draggable ({anulować: "p.ui-widget-header"});
$ ( "Div, p") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "przeciągany" class = "ui-widget-content">
<P class = "ui-widget-header"> Można tylko przeciągnąć i upuścić w tym zakresie I </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> Można zabrać mnie wokół przeciągnąć & hellip; </ p>
<P class = "ui-widget-header"> & hellip; ale nie można przeciągnąć mnie </ p> W tym zakresie
</ Div>
</ Body>
</ Html>
Przywracanie lokalizację
Podobnie jak w przypadku wartości logiczne revert , gdy opcja przeciągany zatrzymać przeciąganie, powrót przeciągany (lub jego zastępca) do pierwotnej lokalizacji.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Przywracanie Lokalizacja </ 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; pływaka: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Przywróć: true});
$ ( "# Draggable2") .draggable ({przywrócić: prawdziwą, pomocnika: "klon"});
});
</ Script>
</ Head>
<Body>
<Div id = "przeciągany" class = "ui-widget-content">
<P> Przywróć </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> Restore Assistant </ p>
</ Div>
</ Body>
</ Html>
Przyciągaj do elementów sieci lub
Wyrównanie można przeciągać elementy DOM granice wewnętrzne lub zewnętrzne. Zastosowanie snap , snapMode (wewnętrzny, zewnętrzny, oba) i snapTolerance (Dzwoniąc dostosowane Draggable odległości pomiędzy elementami w pikselach) opcja.
Wyrównaj do siatki lub przeciągany. Przez grid opcji, aby ustawić rozmiar komórki siatki (piksele wysokości lub szerokości).
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - Dostosowanie się do elementów sieci lub </ 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; pływaka: left; margin: 0 10px 10px 0; font-size: .9em;}
.ui-widget-header p, .ui-widget-content p {margin: 0;}
#snaptarget {height: 140px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Snap: true});
$ ( "# Draggable2") .draggable ({przystawki: ".ui-widget-header"});
$ ( "# Draggable3") .draggable ({przystawki: ".ui-widget-header", snapMode: "zewnętrzny"});
$ ( "# Draggable4") .draggable ({siatki: [20, 20]});
$ ( "# Draggable5") .draggable ({siatki: [80, 80]});
});
</ Script>
</ Head>
<Body>
<Div id = "snaptarget" class = "ui-widget-header">
<P> Ja celem wyrównany </ p>
</ Div>
style="clear:both"> <br
<Div id = "przeciągany" class = "przeciągany ui-widget-content">
<P> Default (snap: true), dostosowane do wszystkich innych Draggable elementu </ p>
</ Div>
<Div id = "draggable2" class = "przeciągany ui-widget-content">
<P> Po prostu dostosowane do dużego pudełka </ p>
</ Div>
<Div id = "draggable3" class = "przeciągany ui-widget-content">
<P> tylko dostosowane do krawędzi zewnętrznej dużym polu </ p>
</ Div>
<Div id = "draggable4" class = "przeciągany ui-widget-content">
<P> dostrojone do siatki 20 x 20 </ p>
</ Div>
<Div id = "draggable5" class = "przeciągany ui-widget-content">
<P> I wyrównane do siatki 80 x 80 </ p>
</ Div>
</ Body>
</ Html>
wizualnej
Przekaż opinię użytkownikowi, jak asystent sposób przeciągać obiekty. helper opcja przyjmuje wartości "original" (z kursorem Draggable obiektów), "klon" (z kursorem Draggable kopii) lub funkcja zwraca element DOM (komponent podczas przeciągnij kursor wokół wyświetlacza). Przez opacity opcja kontroluje asystenta przezroczystości.
Aby odróżnić co jest przeciągany jest przeciągany, niech przeciągany w ruchu, aby utrzymać front. Jeśli przeciągnięcie za pomocą zIndex opcję, aby ustawić wysokość asystent z-index lub użyj stack opcję, aby upewnić się, że w przypadku zatrzymania przeciąganie, ostatni przeciągany element pojawia się zawsze na górze grupie z innymi projektami.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) - wizualne sprzężenie zwrotne </ 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; pływaka: left; margin: 0 10px 10px 0;}
#draggable, # draggable2, # draggable3 {margin-bottom: 20px;}
#set {clear: both; pływaka: left; width: 368px; height: 120 pikseli;}
p {clear: both; margin: 0; padding: 1 em 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Helper: "oryginał"});
$ ( "# Draggable2") .draggable ({opacity: 0.7, pomocnik "klon"});
$ ( "# Draggable3") .draggable ({
Kursor "przenieść"
cursorAt: {top: -12, w lewo: -20}
Pomocnik: function (event) {
return $ ( "<div class = 'ui-widget-header'> Jestem niestandardowych pomocnika </ div>");
}
});
$ ( "#set Div") .draggable ({stos: "#set div"});
});
</ Script>
</ Head>
<Body>
<H3 class = "Docs"> pomocnika </ h3>
<Div id = "przeciągany" class = "ui-widget-content">
<P> oryginalny </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> półprzezroczysty klon </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget-content">
<P> Asystent klienta (w połączeniu z cursorAt) </ p>
</ Div>
<H3 class = "Docs"> stack: </ h3>
<Div id = "set">
<Div class = "ui-widget-content">
<P> Jesteśmy draggables .. </ p>
</ Div>
<Div class = "ui-widget-content">
<P> .. to z-index jest sterowana automatycznie .. </ p>
</ Div>
<Div class = "ui-widget-content">
<P> .. z Opcje stosie. </ P>
</ Div>
</ Div>
</ Body>
</ Html>
jQuery UI Draggable + Sortable
Draggable i Sortable bezproblemową interakcję.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI przeciągnij (Draggable) + 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 ({
przywrócić: true
});
$ ( "#draggable") .draggable ({
connectToSortable: "#sortable"
pomocnika "klon"
powróci: "nieważny"
});
$ ( "Ul Li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul>
<Li id = "przeciągany" class = "ui-state-highlight"> Proszę przeciągnąć mnie </ li>
</ Ul>
<Ul id = "sortable">
<Li class = "ui-state-default"> Pozycja 1 </ li>
<Li class = "ui-state-default"> Punkt 2 </ li>
<Li class = "ui-state-default"> Pozycja 3 </ li>
<Li class = "ui-state-default"> Punkt 4 </ li>
<Li class = "ui-state-default"> Punkt 5 </ li>
</ Ul>
</ Body>
</ Html>