jquery实现元素拖动排序（附代码）
这次给大家带来jquery实现元素拖动排序（附代码），jquery实现元素拖动排序的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery学习-jquery对元素拖动排序</title>
<style type="text/css">
#show
{
color: Red;
}
#list
{
cursor: move;
width: 300px;
}
#list li
{
border: solid 1px yellow;
float: left;
list-style-type
: none;
margin-top: 10px;下边，我们一步一步来实现这个功能。
<span id="show">
<p>
<input id="check" type="checkbox" />
</p>
<p>
<input type="hidden" id="orderlist" />
<ul id="list">
<asp:Repeater ID="rptOrder" runat="server">
<ItemTemplate>
<li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
<img alt="img" src="<%#Eval("Link") %>" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</p>有一个单选框，当用户选中后，拖动图片时对数据库中数据排序进行更改。隐藏域保存原来的图片排列顺序。ul显示图片列表。
为了能看得过去，稍微加了点样式：
var show = jQuery("#show"); //输出提示
var orderlist = jQuery("#orderlist"); //原顺序
var check = jQuery("#check"); //是否更新到数据库首先将常用的选择器保存下来，这样后边调用就变得比较简洁。这一部大家肯定没有问题。^_^
//保存原来的排列顺序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列顺序保存在title，得到后更改title
jQuery(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join(','));保存原来的排列顺序到隐藏域。这里用到了数组的push()方法，就是将ul每个li中的title(原来的排列顺序)添加到数组中。最后用join()方法，得到了原排列顺序，返回一个字符串。现在排列顺序格式为1,2,3 。
//ajax更新
var Update = function(itemid, itemorder) {
jQuery.ajax({
type: "post",
url: "update.aspx",
//id:新的排列对应的ID,order：原排列顺序
data: { id: itemid, order: orderlist.val() },
beforeSend: function() {
show.html("正在更新");
},
success: function() {
show.html("更新成功");
}
});
};接下来，将ajax更新块单独分出来。这样程序变得比较整洁，这块没有新东西。
//调用ajax更新方法
var Submit = function(update) {
var order = [];
list.children("li").each(function() {
order.push(this.id);
});
var itemid = order.join(',');
//如果单选框选中，则更新表中排列顺序
if (update) {
Update(itemid);
}
else {
show.html("");
}
};和得到排列顺序类似，将ID组成一个字符串传递给了Update()方法。函数中的参数update为checkbox是否选中。
//执行排列操作
list.sortable({
opacity: 0.7,
update: function() {
Submit(check.attr("checked"));
}
});
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//保存常用选择器
var list = $("#list"); //ul
var show = $("#show"); //输出提示
var orderlist = $("#orderlist"); //原顺序
var check = $("#check"); //是否更新到数据库
//保存原来的排列顺序
var order = [];
list.children("li").each(function () {
order.push(this.title); //原排列顺序保存在title，得到后更改title
$(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join());
//执行排列操作
list.sortable({
axis: 'y',//只能横向拖动
opacity: 0.7,// 移动时的透明度
update: function () {//当排序动作结束时且元素坐标已经发生改变时触发此事件。
Submit(check.attr("checked"));
}
});
//ajax更新
var Update = function (itemid, itemorder) {
$.ajax({
type: "post",
url: "update.aspx",
data: { id: itemid, order: orderlist.val() }, //id:新的排列对应的ID,order：原排列顺序
beforeSend: function () {
show.html("正在更新");
},
success: function (req) {
if (req == "100") {
show.html("更新成功");
}
else if (req == "001") {
show.html("失败，请稍后再试");
}
else {
show.html("参数不全");
}
}
});
};
//调用ajax更新方法
var Submit = function (update) {
var order = [];
list.children("li").each(function () {
order.push(this.id);
});
var itemid = order.join(',');
//如果单选框选中，则更新表中排列顺序
if (update) {
Update(itemid);
}
else {
show.html("");
}
};
});
</script>
</head>
<body>
<form method="post" action="jquery-drag-order-sort.aspx" id="form1">
<p class="aspNetHidden">
<input type="hidden" name="VIEWSTATE" id="VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" />
</p>
<span id="show"></span>
<h1>jQuery对元素拖动排序</h1>
<p>拖动时同时更新数据库数据：<input type="checkbox" id="check" /></p>
<p>
<input type="hidden" id="orderlist" />
<ul id="list">
<li id="14" title="1">
<img alt="img" src="http://www.baidu.com/img/baidu_logo.gif" /></li>
<li id="13" title="2">
<img alt="img" src="http://www.google.com.hk/images/srpr/logo3w.png" /></li>
<li id="16" title="3">
<img alt="img" src="http://img3.cn.msn.com/images/0809/logo1.png" /></li>
</ul>
</p>
</form>
</body>
</html>最后，执行排列操作。后台部分就是对现在ID对应原来排列顺序的更新，相信大家并不陌生。
可以看出如果不进行数据库操作，该插件只需要调用sorttable便可完成对元素的拖动。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci jquery实现元素拖动排序（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1655
14
1413
52
1306
25
1252
29
1226
24
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Bagaimana untuk mengisih markah WPS
Mar 20, 2024 am 11:28 AM
Dalam kerja kami, kami sering menggunakan perisian wps Terdapat banyak cara untuk memproses data dalam perisian wps, dan fungsinya juga sangat berkuasa Kami sering menggunakan fungsi untuk mencari purata, ringkasan, dan sebagainya kaedah yang boleh digunakan untuk data statistik telah disediakan untuk semua orang dalam perpustakaan perisian WPS Di bawah kami akan memperkenalkan langkah-langkah bagaimana untuk mengisih markah dalam WPS Selepas membaca ini, anda boleh belajar daripada pengalaman. 1. Mula-mula buka jadual yang perlu diberi ranking. Seperti yang ditunjukkan di bawah. 2. Kemudian masukkan formula =pangkat(B2, B2: B5, 0), dan pastikan anda memasukkan 0. Seperti yang ditunjukkan di bawah. 3. Selepas memasukkan formula, tekan kekunci F4 pada papan kekunci komputer Langkah ini adalah untuk menukar rujukan relatif kepada rujukan mutlak.
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Cara mengisih jadual WPS untuk memudahkan statistik data
Mar 20, 2024 pm 04:31 PM
WPS ialah perisian pejabat yang sangat lengkap, termasuk penyuntingan teks, jadual data, pembentangan PPT, format PDF, carta alir dan fungsi lain. Antaranya, yang paling kami gunakan ialah teks, jadual, dan demonstrasi, dan mereka juga yang paling kami kenali. Dalam kerja belajar kami, kami kadang-kadang menggunakan jadual WPS untuk membuat beberapa statistik data Sebagai contoh, sekolah akan mengira markah setiap pelajar sebenarnya, kami tidak perlu risau, kerana jadual WPS kami mempunyai fungsi sorting untuk menyelesaikan masalah ini untuk kami. Seterusnya, mari belajar cara mengisih WPS bersama-sama. Langkah kaedah: Langkah 1: Mula-mula kita perlu membuka jadual WPS yang perlu diisih
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Cara menyusun dalam excel
Mar 05, 2024 pm 04:12 PM
Kaedah pengisihan dalam excel: 1. Pengisihan lajur tunggal 2. Pengisihan berbilang lajur 3. Pengisihan tersuai. Pengenalan terperinci: 1. Pengisihan lajur tunggal ialah kaedah pengisihan yang paling biasa mengikut lajur yang dipilih daripada, mengisih mengikut lajur lain; 3. Pengisihan tersuai, membolehkan pengguna mentakrifkan susunan mengikut keperluan mereka sendiri.
Cara menyusun semula berbilang lajur dalam Power Query melalui seret dan lepas
Mar 14, 2024 am 10:55 AM
Dalam artikel ini, kami akan menunjukkan kepada anda cara menyusun semula berbilang lajur dalam PowerQuery dengan menyeret dan melepaskan. Selalunya, apabila mengimport data daripada pelbagai sumber, lajur mungkin tidak berada dalam susunan yang diingini. Menyusun semula lajur bukan sahaja membolehkan anda menyusunnya dalam susunan logik yang sesuai dengan keperluan analisis atau pelaporan anda, ia juga meningkatkan kebolehbacaan data anda dan mempercepatkan tugas seperti menapis, mengisih dan melakukan pengiraan. Bagaimana untuk menyusun semula berbilang lajur dalam Excel? Terdapat banyak cara untuk menyusun semula lajur dalam Excel. Anda hanya boleh memilih pengepala lajur dan seret ke lokasi yang dikehendaki. Walau bagaimanapun, pendekatan ini boleh menjadi rumit apabila berurusan dengan jadual besar dengan banyak lajur. Untuk menyusun semula lajur dengan lebih cekap, anda boleh menggunakan editor pertanyaan yang dipertingkatkan. Mempertingkatkan pertanyaan
Bagaimana untuk mengisih nilai dalam tatasusunan mengikut saiz dalam PHP
Mar 22, 2024 pm 05:24 PM
PHP ialah bahasa skrip sebelah pelayan yang biasa digunakan secara meluas dalam pembangunan laman web dan bidang pemprosesan data. Dalam PHP, ia adalah keperluan yang sangat biasa untuk mengisih nilai dalam tatasusunan mengikut saiz. Dengan menggunakan fungsi isihan terbina dalam, anda boleh menyusun tatasusunan dengan mudah. Berikut akan memperkenalkan cara menggunakan PHP untuk mengisih nilai dalam tatasusunan mengikut saiz, dengan contoh kod tertentu: 1. Isih nilai dalam tatasusunan dalam susunan menaik:
