<!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拖动插件的使用的更多相关文章

  1. dragsort拖动排序

    引入文件jQuery.jquery.dragsort-0.5.2.min.js html文件: css文件: ul { margin:0px; padding:0px; margin-left:20p ...

  2. jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件

    jquery插件课程1  幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...

  3. 仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）

    事实上不太适合做上拉刷新和下拉加载 官方地址 http://idangero.us/swiper demo http://idangero.us/swiper/demos/#.V5YV4_mF4dU ...

  4. JQuery 左右拖动插件

    js文件:http://hokaccha.github.io/js-flipsnap/js/flipsnap.js 官网: http://hokaccha.github.io/js-flipsnap/

  5. jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragso ...

  6. 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    转自:http://www.itokit.com/2014/0820/75058.html 我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort. dragsort官网地址:ht ...

  7. canvas实现拖动页面时显示窗口视频

    简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...

  8. Jqgrid入门-Jqgrid列数据拖动(七)

    上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置.     Jqgrid表格插件自己没有 ...

  9. bootstrap-slider插件使用方法

    bootstrap-slider例子地址:https://seiyria.com/bootstrap-slider/ bootstrap-slider github地址:https://github. ...

随机推荐

  1. OpenGl从零开始之坐标变换

    http://www.tuicool.com/articles/uiayYrI OpenGL学习脚印: 坐标变换过程(vertex transformation) http://blog.csdn.n ...

  2. iOS中调用系统录音功能及其播放

    最近做的项目中,用到了录音的功能,简单记录一下. 我的想法是:通过重写button的点击事件,来达到录音的目的. /*----------------------------------[录音]--- ...

  3. Nginx集群(转)

    转自:http://hi.baidu.com/xingyuanju/blog/item/779a2a23b7ebb749935807f1.html http://hi.baidu.com/dianhu ...

  4. android 数据库的增删改查的另一种方式

    老师笔记 # 3 Android下另外一种增删改查方式         1.创建一个帮助类的对象,调用getReadableDatabase方法,返回一个SqliteDatebase对象 2.使用Sq ...

  5. Typical sentences in SCI papers

       Beginning  1. In this paper, we focus on the need for   2. This paper proceeds as follow.   3. Th ...

  6. Codevs 1014 装箱问题

    题目描述 Description 有一个箱子容量为V(正整数,0<＝V<＝20000),同时有n个物品(0<n<＝30),每个物品有一个体积(正整数). 要求n个物品中,任取若 ...

  7. Excel 窗体控件属性

    常规 AutoLoad   (Excel) 打开工作簿时是否加载控件.(如果是 ActiveX   控件,则忽略.) Enabled(表单) 控件是否可以接收焦点并响应用户生成的事件. Locked( ...

  8. 数据库连接字符串大全 资料引用:http://www.knowsky.com/339545.html

    转自:http://www.connectionstrings.com/ • SQL Server • ODBC ◦ Standard Security: "Driver={SQL Serv ...

  9. Linux操作系统启动流程浅析

    启动BIOS程序 当电源键按下之后,BIOS(Basic nput Output System)就会由主板上的闪存来运行.BIOS程序会把自己解压缩到系统的内存之中,然后读取CMOS(Compleme ...

  10. Easyui datebox控件打开页面就验证解决方法

    问题描述: datebox时间控件有些场景下默认值需要为空,但是为空的情况下打开页面会自动验证,十分影响美观. 实现原理: <input class="easyui-databox&q ...