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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
Vue生命周期示例详解
Apr 12 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
JavaScript中数组去重的5种方法
Jul 04 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
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
详解php实现页面静态化原理
2017/06/21 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Vue props用法详解(小结)
2018/07/03 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
使用python实现接口的方法
2017/07/07 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python如何代码集体右移
2020/07/20 Python
Python中生成ndarray实例讲解
2021/02/22 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
C语言面试题
2015/10/30 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
关于安全演讲稿
2014/05/09 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS