jQuery UI contoh - menyortir (Sortable)
Menggunakan mouse untuk menyesuaikan diurutkan daftar atau grid elemen.
Untuk rincian lebih lanjut tentang interaksi sortable, lihat dokumentasi API widget sortable (diurutkan Widget) .
Fungsi standar
Fitur diurutkan diaktifkan pada setiap elemen DOM. Klik dan tarik mouse untuk daftar unsur lokasi baru, item lainnya akan secara otomatis disesuaikan. Secara default, diurutkan setiap entri bersama draggable atribut.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - 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>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable li {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
rentang #sortable li {position: absolute; margin-left: -1.3em;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Kepala>
<Body>
<Ul id = "diurutkan">
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 1 </ li>
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 2 </ li>
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Butir 3 </ li>
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 4 </ li>
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Butir 5 </ li>
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Butir 6 </ li>
<Class Li = "ui-negara-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Butir 7 </ li>
</ Ul>
</ Body>
</ Html>
Daftar koneksi
Oleh connectWith lewat pilihan pemilih untuk menempatkan daftar unsur-unsur dalam daftar diurutkan ke yang lain, dan sebaliknya. Cara termudah adalah dengan daftar semua kelompok yang relevan dari kelas CSS, dan kemudian lulus kelas untuk fungsi diurutkan (misalnya, connectWith: '.myclass' ).
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - daftar koneksi </ 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>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "# Sortable1, # sortable2") .sortable ({
connectwith: ".connectedSortable"
.}) DisableSelection ();
});
</ Script>
</ Kepala>
<Body>
<Ul id = "sortable1" class = "connectedSortable">
<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>
<Ul id = "sortable2" class = "connectedSortable">
<Li class = "ui-negara-highlight"> Item 1 </ li>
<Li class = "ui-negara-highlight"> Item 2 </ li>
<Li class = "ui-negara-highlight"> Item 3 </ li>
<Li class = "ui-negara-highlight"> Item 4 </ li>
<Li class = "ui-negara-highlight"> Butir 5 </ li>
</ Ul>
</ Body>
</ Html>
tab Daftar koneksi
Dengan menempatkan bagian atas daftar item ke tab yang sesuai untuk menempatkan daftar unsur-unsur dalam daftar diurutkan ke yang lain, dan sebaliknya.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - tab daftar sambungan </ 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>
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
var $ tab = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "ul: li pertama", $ tab) .droppable ({
menerima: "li .connectedSortable",
hoverClass: "ui-negara melayang-layang",
menjatuhkan: function (event, ui) {
var $ item = $ (ini);
var $ list = $ ($ item.find ( "a") attr ( "href"))
.find ( ".connectedSortable");
ui.draggable.hide ( "lambat", function () {
$ Tabs.tabs ( "pilihan", "aktif", $ tab_items.index ($ item));
$ (Ini) .appendTo ($ list) .show ( "lambat");
});
}
});
});
</ Script>
</ Kepala>
<Body>
<Div id = "tab">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
</ Ul>
<Div id = "tab-1">
<Ul id = "sortable1" class = "connectedSortable ui-helper-ulang">
<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>
</ Div>
<Div id = "tab-2">
<Ul id = "sortable2" class = "connectedSortable ui-helper-ulang">
<Li class = "ui-negara-highlight"> Item 1 </ li>
<Li class = "ui-negara-highlight"> Item 2 </ li>
<Li class = "ui-negara-highlight"> Item 3 </ li>
<Li class = "ui-negara-highlight"> Item 4 </ li>
<Li class = "ui-negara-highlight"> Butir 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
mulai tertunda
Tertunda oleh waktu tunda dan jarak untuk mencegah kecelakaan semacam. Dengan delay milidetik pilihan harus ditetapkan sebelum awal hambatan semacam itu. Dengan distance piksel pilihan harus ditetapkan sebelum awal hambatan semacam itu.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - 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>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; zoom: 1;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "# Sortable1") .sortable ({
delay: 300
});
$ ( "# Sortable2") .sortable ({
Jarak: 15
});
$ ( "Li") .disableSelection ();
});
</ Script>
</ Kepala>
<Body>
<Class H3 = "docs"> waktu tunda 300ms: </ h3>
<Ul id = "sortable1">
<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>
</ Ul>
<Class H3 = "docs"> delay jarak 15px: </ h3>
<Ul id = "sortable2">
<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>
</ Ul>
</ Body>
</ Html>
Hal ini ditampilkan sebagai kotak
Mari entri diurutkan ditampilkan sebagai kotak, sehingga mereka menggunakan CSS dengan dimensi yang sama dan tampilan mengambang.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - menampilkan grid </ 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>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
#sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Kepala>
<Body>
<Ul id = "diurutkan">
<Class Li = "ui-negara-default"> 1 </ li>
<Class Li = "ui-negara-default"> 2 </ li>
<Class Li = "ui-negara-default"> 3 </ li>
<Class Li = "ui-negara-default"> 4 </ li>
<Class Li = "ui-negara-default"> 5 </ li>
<Class Li = "ui-negara-default"> 6 </ li>
<Class Li = "ui-negara-default"> 7 </ li>
<Class Li = "ui-negara-default"> 8 </ li>
<Class Li = "ui-negara-default"> 9 </ li>
<Class Li = "ui-negara-default"> 10 </ li>
<Class Li = "ui-negara-default"> 11 </ li>
<Class Li = "ui-negara-default"> 12 </ li>
</ Ul>
</ Body>
</ Html>
Tempatkan placeholder
Ketika menyeret entri diurutkan ke lokasi baru, entri lain akan membuat ruang untuk entri. Meminta placeholder pilihan transfer untuk menentukan kelas kosong gaya visual. nilai Boolean forcePlaceholderSize opsi untuk mengatur ukuran placeholder.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - ditempatkan pengganti </ 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>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em;}
html> tubuh #sortable li {height: 1.5em; line-height: 1.2em;}
Ui-negara sorot {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "#sortable") .sortable ({
placeholder: "ui-negara-highlight"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Kepala>
<Body>
<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>
<Li class = "ui-negara-default"> Item 6 </ li>
<Li class = "ui-negara-default"> Butir 7 </ li>
</ Ul>
</ Body>
</ Html>
Pengolahan daftar kosong
oleh Opsi disetel false , untuk mencegah daftar semua entri ditempatkan ke dalam daftar kosong terpisah. Secara default, entri diurutkan dapat ditempatkan ke dalam daftar kosong.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - penanganan daftar kosong </ 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>
# Sortable1, # sortable2, # sortable3 {list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
# Sortable1 li, # sortable2 li, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "Ul.droptrue") .sortable ({
connectwith: "ul"
});
$ ( "Ul.dropfalse") .sortable ({
connectwith: "ul",
dropOnEmpty: false
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Kepala>
<Body>
<Ul id = "sortable1" class = "droptrue">
<Class Li = "ui-negara-default"> dapat ditempatkan .. </ li>
<Class Li = "ui-negara-default"> .. daftar kosong </ 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>
<Ul id = "sortable2" class = "dropfalse">
<Class Li = "ui-negara-highlight"> tidak dapat ditempatkan .. </ li>
<Class Li = "ui-negara-highlight"> .. daftar kosong </ li>
<Li class = "ui-negara-highlight"> Item 3 </ li>
<Li class = "ui-negara-highlight"> Item 4 </ li>
<Li class = "ui-negara-highlight"> Butir 5 </ li>
</ Ul>
<Ul id = "sortable3" class = "droptrue">
</ Ul>
style="clear:both"> <br
</ Body>
</ Html>
Sertakan / Kecualikan entri
Ditunjuk oleh items lulus jQuery pilihan pemilih yang item dapat diurutkan. Pilihan ini luar proyek tidak dapat dipesan, tetapi mereka tidak valid sasaran diurutkan entri.
Jika Anda ingin mencegah entri tertentu diurutkan, untuk cancel pilihan untuk melewati pemilih jQuery. Dibatalkan entri masih berlaku menyortir sasaran entri lainnya.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - Sertakan / Kecualikan entri </ 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>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; zoom: 1;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 3px; width: 90%;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "# Sortable1") .sortable ({
item: "li: tidak (Ui-negara penyandang cacat)"
});
$ ( "# Sortable2") .sortable ({
membatalkan: "Ui-negara-cacat"
});
$ ( "# Sortable1 li, # sortable2 li") .disableSelection ();
});
</ Script>
</ Kepala>
<Body>
<Class H3 = "docs"> menentukan item yang diurutkan: </ h3>
<Ul id = "sortable1">
<Li class = "ui-negara-default"> Item 1 </ li>
<Class Li = "ui-negara-default ui-negara-cacat"> (saya tidak diurutkan atau target penurunan) </ li>
<Class Li = "ui-negara-default ui-negara-cacat"> (saya tidak diurutkan atau target penurunan) </ li>
<Li class = "ui-negara-default"> Item 4 </ li>
</ Ul>
<Class H3 = "docs"> membatalkan pesanan (tapi sebagai target penurunan): </ h3>
<Ul id = "sortable2">
<Li class = "ui-negara-default"> Item 1 </ li>
<Class Li = "ui-negara-default ui-negara-cacat"> (saya tidak diurutkan) </ li>
<Class Li = "ui-negara-default ui-negara-cacat"> (saya tidak diurutkan) </ li>
<Li class = "ui-negara-default"> Item 4 </ li>
</ Ul>
</ Body>
</ Html>
komponen Portal (Portlets)
Aktifkan komponen Portal (gaya div) sebagai diurutkan, dan menggunakan connectWith pilihan untuk memungkinkan komunikasi antara kolom semacam.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI menyortir (Sortable) - komponen Portal (Portlets) </ 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>
body {
min-width: 520px;
}
.column {
width: 170px;
float: kiri;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-ubah {
position: absolute;
top: 50%;
kanan: 0;
margin-top: -8px;
}
.portlet-konten {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted hitam;
margin: 0 1em 1em 0;
height: 50px;
}
</ Style>
<Script>
$ (Fungsi () {
$ ( ".column") .sortable ({
connectwith: ".column",
menangani: ".portlet-header",
membatalkan: ".portlet-ubah",
placeholder: "portlet-placeholder ui-sudut-semua"
});
$ ( ".portlet")
.addClass ( "ui-widget ui-widget-konten ui-helper-clearfix ui-sudut-semua")
.find ( ".portlet-header")
.addClass ( "ui-widget-header ui-sudut-semua")
.prepend ( "<span class = 'ui-icon ui-icon-minusthick portlet-ubah'> </ span>");
$ ( ".portlet-Beralih") .Klik (function () {
icon var = $ (ini);
icon.toggleClass ( "ui-icon-minusthick ui-icon-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-konten") .toggle ();
});
});
</ Script>
</ Kepala>
<Body>
<Class Div = "kolom">
<Class Div = "portlet">
<Div class = "portlet-header"> Berlangganan </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Class Div = "portlet">
<Class Div = "portlet-header"> berita </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Class Div = "kolom">
<Class Div = "portlet">
<Class Div = "portlet-header"> keranjang </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Class Div = "kolom">
<Class Div = "portlet">
<Div class = "portlet-header"> di </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Class Div = "portlet">
<Class Div = "portlet-header"> Gambar </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Body>
</ Html>