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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
js格式化时间的简单实例
Nov 27 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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
用PHP读取IMAP邮件
2006/10/09 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
php中smarty区域循环的方法
2015/06/11 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
javascript arguments使用示例
2014/12/16 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
python 远程统计文件代码分享
2015/05/14 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python如何对齐字符串
2020/07/30 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
yy司仪主持词
2014/03/22 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
员工年终考核评语
2014/12/31 职场文书
贷款担保书
2015/01/20 职场文书
泰山导游词
2015/02/02 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers