Tutorial jQuery UI contoh - drag (Draggable) Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Fungsi standar,bergulir otomatis,gerak dibatasi,kursor Style,mulai tertunda,peristiwa,menangani,Kembalikan lokasi,Snap elemen Grid atau,umpan balik visual,jQuery UI draggable + Sortable,
Memungkinkan mouse untuk memindahkan elemen.
Untuk rincian lebih lanjut tentang interaksi draggable, lihat dokumentasi API dapat drag dan drop widget (yang Draggable Widget) .
Mengaktifkan fitur diseret pada setiap elemen DOM. Dengan mengklik dan menyeret mouse di viewport untuk memindahkan objek draggable.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - Fungsi standar </ 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"> <Gaya> #draggable {width: 150px; height: 150px; padding: 0.5em;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable (); }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget-content"> <P> Silahkan menyeret saya! </ P> </ Div> </ Body> </ Html>
bergulir otomatis melalui dokumen ketika draggable pindah luar viewport. Mengatur scroll
pilihan untuk benar untuk mengaktifkan bergulir otomatis, fine-tuning, kecepatan bergulir ketika bergulir melalui pemicu scrollSensitivity
dan scrollSpeed
pilihan pengaturan.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - bergulir otomatis </ 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"> <Gaya> #draggable, # draggable2, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Gulir: true}); $ ( "# Draggable2") .draggable ({gulir: true, scrollSensitivity: 100}); $ ( "# Draggable3") .draggable ({gulir: true, scrollSpeed: 100}); }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget-content"> <P> Geser diatur ke benar, pengaturan default </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> <P> scrollSensitivity ke 100 </ p> </ Div> <Div id = "draggable3" class = "ui-widget-content"> <P> scrollSpeed ke 100 </ p> </ Div> <Div style = "height: 5000px; width: 1px;"> </ div> </ Body> </ Html>
daerah diseret didefinisikan oleh batas untuk membatasi pergerakan setiap diseret. Mengatur axis
opsi untuk membatasi jalan draggable untuk sumbu x atau y-sumbu, atau containment
pilihan untuk menentukan orangtua DOM elemen atau pemilih jQuery, seperti 'dokumen.'.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - dibatasi gerak </ 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"> <Gaya> .draggable {width: 90px; height: 90px; padding: 0.5em; float: kiri; 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 # ccc padat; padding: 10px;} h3 {jelas: kiri;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Axis: "y"}); $ ( "# Draggable2") .draggable ({axis: "x"}); $ ( "# Draggable3") .draggable ({containment: "# containment-wrapper", gulir: false}); $ ( "# Draggable5") .draggable ({containment: "orang tua"}); }); </ Script> </ Kepala> <Body> <H3> gerak sepanjang kendala axis: </ h3> <Div id = "draggable" class = "draggable ui-widget-content"> <P> Hanya tarik vertikal </ p> </ Div> <Div id = "draggable2" class = "draggable ui-widget-content"> <P> Hanya tarik horisontal </ p> </ Div> <H3> atau dibatasi gerak dalam elemen DOM lain: </ h3> <Div id = "containment-wrapper"> <Div id = "draggable3" class = "draggable ui-widget-content"> <P> saya dibatasi dalam kotak </ p> </ Div> <Div class = "draggable ui-widget-content"> <P id = "draggable5" class = "ui-widget-header"> Aku terkurung dalam elemen induk </ p> </ Div> </ Div> </ Body> </ Html>
Ketika menyeret objek ke posisi kursor. Secara default, kursor berada di tengah menyeret objek. Gunakan cursorAt
pilihan untuk menentukan posisi relatif terhadap yang lain (yang ditentukan sehubungan dengan atas nilai pixel, kanan, bawah, kiri) ini diseret. Dengan memberikan nilai CSS kursor valid dengan cursor
pilihan untuk menyesuaikan tampilan kursor. Valid CSS nilai kursor meliputi: default, bergerak, pointer, crosshair, dan sebagainya.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - 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"> <Gaya> #draggable, # draggable2, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Kursor: "bergerak", cursorAt: {top: 56, kiri: 56}}); $ ( "# Draggable2") .draggable ({cursor: "crosshair", cursorAt: {top: -5, kiri: -5}}); $ ( "# Draggable3") .draggable ({cursorAt: {bottom: 0}}); }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget-content"> <P> Aku selalu di tengah (sehubungan dengan mouse) </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> <P> kursor saya adalah kiri -5 dan atas -5 </ p> </ Div> <Div id = "draggable3" class = "ui-widget-content"> <P> Saya hanya mengontrol posisi kursor nilai 'bawah' </ p> </ Div> </ Body> </ Html>
Dengan delay
delay milidetik mulai menyeret pengaturan pilihan. Dengan distance
opsi ditekan dan tarik kursor ke pixel ditentukan sebelum mengizinkan drag dan drop.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - tertunda 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"> <Gaya> #draggable, # draggable2 {width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Jarak: 20}); $ ( "# Draggable2") .draggable ({delay: 1000}); $ ( "Ui-Draggable") .disableSelection (); }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget-content"> <P> Hanya ketika saya tarik 20 pixel, dan mulai menyeret </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> Setelah <p> Tidak peduli berapa banyak jarak Anda harus menyeret dan tarik mulai menunggu 1000ms </ p> </ Div> </ Body> </ Html>
draggable pada start
, drag
dan stop
peristiwa. Menyeret awal pemicu start
acara, dipicu selama tarik drag
acara, dipicu ketika hambatan berhenti stop
acara.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - Acara </ 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"> <Gaya> #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-icon {float: left;} #draggable ul li span.count {font-weight: bold;} </ Style> <Script> $ (Fungsi () { var $ start_counter = $ ( "# event-start"), $ Drag_counter = $ ( "# event-tarik"), $ Stop_counter = $ ( "# event-stop"), jumlah = [0, 0, 0]; $ ( "#draggable") .draggable ({ mulai: function () { jumlah [0] ++; updateCounterStatus ($ start_counter, jumlah [0]); }, tarik: function () { jumlah [1] ++; updateCounterStatus ($ drag_counter, jumlah [1]); }, berhenti: function () { jumlah [2] ++; updateCounterStatus ($ stop_counter, jumlah [2]); } }); berfungsi updateCounterStatus ($ event_counter, NEW_COUNT) { // Updated negara visual yang pertama id. if (! $ event_counter.hasClass ( "ui-negara melayang")) { $ Event_counter.addClass ( "ui-negara melayang") . .siblings () RemoveClass ( "ui-negara melayang"); } // id. Kemudian informasi $ ( "span.count", $ event_counter) .text (NEW_COUNT) nomor; } }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget ui-widget-content"> <P> Silakan menyeret saya, memicu rantai peristiwa. </ P> <Class Ul = "ui-helper-ulang"> <Li id = "acara-start" class = "ui-negara-default ui-sudut-semua"> <span class = "ui-icon ui-icon-play"> </ span> "mulai" disebut <span class = "count"> 0 </ span> x </ li> <Li id = "acara-tarik" class = "ui-negara-default ui-sudut-semua"> <span class = "ui-icon ui-icon panah-4"> </ span> "drag" disebut <span class = "count"> 0 </ span> x </ li> <Li id = "acara-stop" class = "ui-negara-default ui-sudut-semua"> <span class = "ui-icon ui-icon-stop"> </ span> "berhenti" disebut <span class = "count"> 0 </ span> x </ li> </ Ul> </ Div> </ Body> </ Html>
Hanya diperbolehkan ketika bagian kursor ditentukan drag pada draggable. Gunakan handle
pilihan untuk menentukan elemen (atau kelompok elemen) dari pemilih jQuery untuk objek diseret.
Atau ketika kursor ditentukan elemen (atau kelompok elemen) dalam tarik diperbolehkan draggable. Gunakan handle
pilihan untuk menentukan membatalkan fungsi tarik jQuery pemilih.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - Menangani </ 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"> <Gaya> #draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;} p #draggable {cursor: bergerak;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Handle: "p"}); $ ( "# Draggable2") .draggable ({membatalkan: "p.ui-widget-header"}); $ ( "Div, p") .disableSelection (); }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget-content"> <P class = "ui-widget-header"> Anda hanya dapat drag dan drop dalam kisaran ini saya </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> <P> Anda bisa membawa saya sekitar untuk menyeret & hellip; </ p> <P class = "ui-widget-header"> & hellip; tetapi Anda tidak dapat menyeret saya </ p> Dalam rentang ini </ Div> </ Body> </ Html>
Seperti dengan nilai Boolean revert
ketika opsi draggable berhenti menyeret, kembali diseret (atau asisten nya) ke lokasi asli.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - Mengembalikan Lokasi </ 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"> <Gaya> #draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Kembalikan: true}); $ ( "# Draggable2") .draggable ({kembali: benar, helper: "clone"}); }); </ Script> </ Kepala> <Body> <Div id = "draggable" class = "ui-widget-content"> <P> Kembalikan </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> <P> Kembalikan Asisten </ p> </ Div> </ Body> </ Html>
Menyelaraskan elemen perbatasan DOM internal atau eksternal draggable. Penggunaan snap
, snapMode
(batin, Outer, baik) dan snapTolerance
(saat memanggil selaras dengan jarak draggable antara unsur-unsur dalam pixel) pilihan.
Menyelaraskan ke Grid atau diseret. Dengan grid
ukuran pilihan untuk mengatur sel-sel grid (piksel tinggi atau lebar).
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - Luruskan elemen Grid atau </ 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"> <Gaya> .draggable {width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em;} Ui-widget-header p, Ui-widget-konten p {margin: 0;} #snaptarget {height: 140px;} </ Style> <Script> $ (Fungsi () { $ ( "#draggable") .draggable ({Snap: true}); $ ( "# Draggable2") .draggable ({sekejap: "Ui-widget-header"}); $ ( "# Draggable3") .draggable ({sekejap: "Ui-widget-header", snapMode: "luar"}); $ ( "# Draggable4") .draggable ({jaringan: [20, 20]}); $ ( "# Draggable5") .draggable ({jaringan: [80, 80]}); }); </ Script> </ Kepala> <Body> <Div id = "snaptarget" class = "ui-widget-header"> <P> Saya gol-blok </ p> </ Div> style="clear:both"> <br <Div id = "draggable" class = "draggable ui-widget-content"> <P> Default (jepret: true), sejalan dengan semua elemen draggable lainnya </ p> </ Div> <Div id = "draggable2" class = "draggable ui-widget-content"> <P> Saya hanya selaras dengan kotak besar </ p> </ Div> <Div id = "draggable3" class = "draggable ui-widget-content"> <P> Saya hanya disesuaikan dengan tepi luar kotak besar </ p> </ Div> <Div id = "draggable4" class = "draggable ui-widget-content"> <P> Saya selaras dengan 20 x 20 jaringan </ p> </ Div> <Div id = "draggable5" class = "draggable ui-widget-content"> <P> Saya selaras dengan 80 x 80 jaringan </ p> </ Div> </ Body> </ Html>
Memberikan umpan balik kepada pengguna, sebagai asisten jalan menyeret benda. helper
pilihan menerima nilai-nilai 'asli' (dengan kursor objek draggable), 'clone' (dengan kursor draggable copy), atau fungsi mengembalikan elemen DOM (elemen selama tarik kursor di sekitar layar). Dengan opacity
pilihan mengontrol transparansi asisten.
Untuk membedakan yang merupakan draggable diseret, biarkan diseret dalam gerakan untuk menjaga depan. Jika Anda menyeret, menggunakan zIndex
pilihan untuk mengatur ketinggian z-index asisten, atau gunakan stack
pilihan untuk memastikan bahwa ketika Anda berhenti menyeret, yang terakhir diseret barang selalu muncul di atas kelompok dengan proyek-proyek lainnya.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) - umpan balik visual </ 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"> <Gaya> #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> $ (Fungsi () { $ ( "#draggable") .draggable ({Helper: "asli"}); $ ( "# Draggable2") .draggable ({opacity: 0.7, helper: "clone"}); $ ( "# Draggable3") .draggable ({ kursor: "bergerak", cursorAt: {top: -12, kiri: -20}, helper: function (event) { kembali $ ( "<div class = 'ui-widget-header'> aku pembantu kustom </ div>"); } }); $ ( "#set Div") .draggable ({menumpuk: "#set div"}); }); </ Script> </ Kepala> <Body> <Class H3 = "docs"> helper: </ h3> <Div id = "draggable" class = "ui-widget-content"> <P> asli </ p> </ Div> <Div id = "draggable2" class = "ui-widget-content"> <P> tembus clone </ p> </ Div> <Div id = "draggable3" class = "ui-widget-content"> <P> Custom asisten (dalam hubungannya dengan cursorAt) </ p> </ Div> <Class H3 = "docs"> stack: </ h3> <Div id = "set"> <Class Div = "ui-widget-content"> <P> Kami adalah draggables id </ p> </ Div> <Class Div = "ui-widget-content"> <P> id itu z-index secara otomatis dikendalikan id </ p> </ Div> <Class Div = "ui-widget-content"> <P> id dengan pilihan stack. </ P> </ Div> </ Div> </ Body> </ Html>
Diseret dan Sortable interaksi mulus.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI drag (Draggable) + Urut (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"> <Gaya> ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;} li {margin: 5px; padding: 5px; width: 150px;} </ Style> <Script> $ (Fungsi () { $ ( "#sortable") .sortable ({ kembali: true }); $ ( "#draggable") .draggable ({ connectToSortable: "#sortable", helper: "clone", kembali: "tidak sah" }); $ ( "Ul, li") .disableSelection (); }); </ Script> </ Kepala> <Body> <Ul> <Li id = "draggable" class = "ui-negara-highlight"> Silakan menyeret saya </ li> </ Ul> <Ul id = "diurutkan"> <Li class = "ui-negara-default"> Item 1 </ li> <Li class = "ui-negara-default"> Item 2 </ li> <Li class = "ui-negara-default"> Item 3 </ li> <Li class = "ui-negara-default"> Item 4 </ li> <Li class = "ui-negara-default"> Butir 5 </ li> </ Ul> </ Body> </ Html>