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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
document.forms用法示例介绍
Jun 26 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
JS回调函数深入理解
Oct 16 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 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
我的论坛源代码(五)
2006/10/09 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python中序列的修改、散列与切片详解
2017/08/27 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python魔法方法功能与用法简介
2019/04/04 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
门卫班长岗位职责
2013/12/15 职场文书
料理师求职信
2014/01/30 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
人事科岗位职责范本
2014/03/02 职场文书
元宵晚会主持词
2014/03/25 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android