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 相关文章推荐
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
vue复合组件实现注册表单功能
Nov 06 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
JS数组的常用10种方法详解
May 08 Javascript
如何手写一个简易的 Vuex
Oct 10 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
Smarty使用自定义资源的方法
2015/08/08 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
高级人员简历的自我评价分享
2013/11/03 职场文书
园林设计师自荐信
2013/11/18 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
开学典礼主持词
2014/03/19 职场文书
法学自荐信
2014/06/20 职场文书
民事和解协议书格式
2014/11/29 职场文书
先进班集体事迹材料
2014/12/25 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang