首页 / JQUERY / jquery实现元素拖动排序（附代码）

jquery实现元素拖动排序（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery实现元素拖动排序（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5614字，纯文字阅读大概需要9分钟。

内容图文

这次给大家带来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便可完成对元素的拖动。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

sortElements实现table排序步骤详解

jquery实现表格排序+实时搜索功能

以上就是jquery实现元素拖动排序（附代码）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jquery实现元素拖动排序（附代码）全部内容，希望文章能够帮你解决jquery实现元素拖动排序（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/291446.html

来源：【匿名】