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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 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
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
webpack入门必知必会
2017/01/16 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
茶叶店创业计划书范文
2014/01/19 职场文书
新护士岗前培训制度
2014/02/02 职场文书
班主任寄语大全
2014/04/04 职场文书
业务内勤岗位职责
2014/04/30 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
新员工入职欢迎词
2015/01/23 职场文书
个人自荐书范文
2015/03/09 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers