jQuery UI contoh - drag (Draggable)
Memungkinkan mouse untuk memindahkan elemen.
Untuk rincian lebih lanjut tentang interaksi draggable, lihat dokumentasi API dapat drag dan drop widget (yang Draggable Widget) .
Fungsi standar
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
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>
gerak dibatasi
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>
kursor Style
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>
mulai tertunda
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>
peristiwa
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 ...
if (! $ event_counter.hasClass ( "ui-negara melayang")) {
$ Event_counter.addClass ( "ui-negara melayang")
. .siblings () RemoveClass ( "ui-negara melayang");
}
// ... 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>
menangani
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>
Kembalikan lokasi
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>
Snap elemen Grid atau
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>
umpan balik visual
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 .. </ p>
</ Div>
<Class Div = "ui-widget-content">
<P> .. itu z-index secara otomatis dikendalikan .. </ p>
</ Div>
<Class Div = "ui-widget-content">
<P> .. dengan pilihan stack. </ P>
</ Div>
</ Div>
</ Body>
</ Html>
jQuery UI draggable + Sortable
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>