jQuery拖动元素并对元素进行重新排序


Posted in Javascript onDecember 30, 2015

本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下

效果图:

jQuery拖动元素并对元素进行重新排序

具体内容如下:

从上图可以看出我们今天要实现的功能。当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序。比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了。这样便很好的提高了用户体验。

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

<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便可完成对元素的拖动。

以上就是jQuery拖动元素并对元素进行重新排序的实现方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
js创建对象的方式总结
Jan 10 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
jQuery给元素添加样式的方法详解
Dec 30 #Javascript
Underscore源码分析
Dec 30 #Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 #Javascript
javascript实现禁止复制网页内容汇总
Dec 30 #Javascript
jquery实现树形菜单完整代码
Dec 29 #Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 #Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
php json转换相关知识(小结)
2018/12/21 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
盛大笔试题
2016/11/05 面试题
JAVA软件工程师测试题
2014/07/25 面试题
活动邀请函范文
2014/01/19 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
消防安全责任书范本
2014/04/15 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
授权收款委托书范本
2014/10/10 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL