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. ...
随机推荐
- asp.net在网页上显示数据库中的数据
第一步: 第二步: 第三步: 第四步:在网页代码中写显示格式代码,如下 <asp:SqlDataSource ID="SqlDataSource1" runat=" ...
- 用实体框架搭建MVC程序框架（全部）
第一步:1.新建项目 2.新建domain类库 3.新建Data类库 4.为上面的1.2.3添加实体框架nuget包.(可以右键管理nuget包来查找entityframework,当然也可以通过程序 ...
- hdu 1716(dfs)
题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=1716 排列2 Problem Description Ray又对数字的列产生了兴趣:现 ...
- hdu 1203 I NEED A OFFER (0-1背包)
题意分析:0-1背包变形 递推公式:dp[i] = max(dp[i], 1-(1-dp[i-C])*(1-p)) /* I NEED A OFFER! Time Limit: 2000/1000 ...
- 杭电ACM2096--小明A+B
http://acm.hdu.edu.cn/showproblem.php?pid=2096 本来就是很简单.但是数据的大小有要求. (a%100+b%100)%100和(a+b)%100本来没有什么 ...
- HDU 1165 Eddy's research II
题意:已知,求A(m, n). 分析:根据样例模拟一下过程就可以找出递推关系. #include<cstdio> #include<cstring> #include<c ...
- ERP基本功——物料的四个量
ERP基本功——物料的四个量 在分析制造业管理问题的时候,如果能借用一些ERP里才会用到的概念,就会非常的简单,并且条理清晰. 我觉得柳中冈先生一再强调的一个观点非常有用,大意是这样的:任何人依据现有 ...
- MDX : Non Empty v/s NonEmpty
MDX : Non Empty v/s NonEmpty User Rating: / 50 PoorBest Written by Jason Thomas Friday, 07 May 20 ...
- jquery trigger伪造a标签的click事件取代window.open方法
$(function() { $('#btnyes').click(function () { $('#ssss').attr("href", "http://www.b ...
- 每日一“酷”之bisect
作用:维护有序列表,而不必在每次想列表增加一个元素时调用sort排序 bisect 模块实现了一个算法用于向列表中插入元素,同时仍保持列表有序.有些情况下,这比反复对一个了表序列更高效,另外也比构建一 ...