jquery对元素拖动排序示例


Posted in Javascript onJanuary 16, 2014

完整代码:(aspx文件末尾有下载)

<!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; 

} 

</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"> 

<div class="aspNetHidden"> 

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" /> 

</div> 

<span id="show"></span> 

<h1>jQuery对元素拖动排序</h1> 

<div>拖动时同时更新数据库数据:<input type="checkbox" id="check" /></div> 

<div> 

<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> 

</div> 

</form> 

</body> 

</html>

下边,我们一步一步来实现这个功能。

<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <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>
</div>

有一个单选框,当用户选中后,拖动图片时对数据库中数据排序进行更改。隐藏域保存原来的图片排列顺序。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")); 
  } 
});

最后,执行排列操作。后台部分就是对现在ID对应原来排列顺序的更新,相信大家并不陌生。

可以看出如果不进行数据库操作,该插件只需要调用sorttable便可完成对元素的拖动。

Javascript 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 #Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 #Javascript
js获取某元素的class里面的css属性值代码
Jan 16 #Javascript
JS可以控制样式的名称写法一览
Jan 16 #Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 #Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 #Javascript
利用浏览器全屏api实现js全屏
Jan 16 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
javascript实现时钟动画
2020/12/03 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
科研先进个人典型材料
2014/01/31 职场文书
商业房地产广告语
2014/03/13 职场文书
规划编制实施方案
2014/03/15 职场文书
爱情保证书
2015/01/17 职场文书
社会实践活动总结格式
2015/05/11 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
python requests模块的使用示例
2021/04/07 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers