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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
vue生命周期的探索
2019/04/03 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
大学生在校学习的自我评价
2014/02/18 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
诚信考试倡议书
2014/04/15 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Python中requests做接口测试的方法
2021/05/30 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技