dragsort拖动插件的使用
<!DOCTYPE html>
<html>
<head>
<title>DragSort Example</title>
<meta charset="utf-8" />
<style type="text/css">
body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; }
ul { margin:0px; padding:0px; margin-left:20px; }
#list2 { width:350px; list-style-type:none; margin:0px; }
#list2 li { float:left; padding:5px; width:100px; height:100px; }
#list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
<div id="list_div" style="width:500px ;height:100px;overflow:auto">
<ul id="list2">
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
<li><div>13</div></li>
<li><div>14</div></li>
<li><div>15</div></li>
<li><div>16</div></li>
<li><div>17</div></li>
<li><div>18</div></li>
</ul>
</div>
<!-- save sort order here which can be retrieved on server on postback -->
<input name="list1SortOrder" type="hidden" />
<script type="text/javascript">
$("#list2").dragsort({
dragSelector: "div",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
scrollContainer:$("#list_div")
});
function saveOrder() {
var data = $("#list2 li").map(function() { return $(this).children().html(); }).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};
</script>
</body>
</html>
dragsort拖动插件的使用的更多相关文章
- dragsort拖动排序
引入文件jQuery.jquery.dragsort-0.5.2.min.js html文件: css文件: ul { margin:0px; padding:0px; margin-left:20p ...
- jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
- 仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）
事实上不太适合做上拉刷新和下拉加载 官方地址 http://idangero.us/swiper demo http://idangero.us/swiper/demos/#.V5YV4_mF4dU ...
- JQuery 左右拖动插件
js文件:http://hokaccha.github.io/js-flipsnap/js/flipsnap.js 官网: http://hokaccha.github.io/js-flipsnap/
- jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragso ...
- 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
转自:http://www.itokit.com/2014/0820/75058.html 我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort. dragsort官网地址:ht ...
- canvas实现拖动页面时显示窗口视频
简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...
- Jqgrid入门-Jqgrid列数据拖动(七)
上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置. Jqgrid表格插件自己没有 ...
- bootstrap-slider插件使用方法
bootstrap-slider例子地址:https://seiyria.com/bootstrap-slider/ bootstrap-slider github地址:https://github. ...
随机推荐
- ueditor 单独图片上传 转载
<body> <script type="text/javascript"> //这个是图片上传的,网上还有附件上传的 (function($) { var ...
- 20141211—C#面向对象，封装
封装 一个private 的变量.在变量名上右键-重构-封装字段 小建议:在创建封装字段的时候,在名字前加 “_”用以区分. 封装时,下划线会自动去除 点击确定后: 应用: 赋值的时候走 set 取值 ...
- js判断输入是否为空，获得输入的类型
使用typeof算法 typeof的运算数未定义,返回的就是 "undefined". 下面定义x为运算数: 有一下5种情况: 运算数为数字 typeof(x) 返回的就是 &qu ...
- linux 系统运行级别及修改[转]
Linux运行级别从0-6,共7个. 0:关机.不能将系统缺省运行级别设置为0,否则无法启动. 1:单用户模式,只允许root用户对系统进行维护. 2:多用户模式,但不能使用NFS(相当于Window ...
- sort()的多种用法
sort() 方法用于对数组的元素进行排序. 一.默认情况 在默认情况下, sort() 方法按升序排列数组项.为了实现排序, sort() 方法会调用每个数组项的 toString() 转型方法, ...
- [Guava源码分析]Ordering：排序
我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3876466.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...
- linux IO子系统和文件系统读写流程
本文转载自:http://blog.csdn.net/kidd_3/article/details/6909097 Technorati 标签: I/O 子系统 --------------- ...
- MySql安装时在Start Service处失败
安装MySql时在最后Start Service时失败: 首先先卸载掉MySql. 查看MySql服务有没有启动,若启动,则先停止MySql服务. 打开注册表,到HKEY_LOCAL_MACHIN ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- js根据IP取得天气
<span id="weather"></span> <script> function weather(cityName) { var cha ...