<!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. 零基础Android学习笔记-02 安卓程序生命周期

    一个安卓程序生命周期会经历7中状态,并不一定是每次都全部经历.Create,Start,ReStart,Pause,Resume,Stop,Destory. 重载方法,用helloWorld程序去体验 ...

  2. UI3_UILabel

    // // AppDelegate.m // UI3_UILabel // // Created by zhangxueming on 15/6/29. // Copyright (c) 2015年 ...

  3. 解决IE8打开默认弹出开发者工具的问题

    有一次开发用ie调试后再次打开总是自动弹出ie开发者工具,而且在网页的上一层弹出.点击X关闭后再次打开还是会弹出! 找ie的设置也没有找到关闭的选项. 在网上搜了很多资料才找到解决的办法,在这里分享一 ...

  4. C# 将日期转换成中文格式

    没有什么难点,只是要小心,要考虑到月.日上 10 的说法,比如:10 不能直接转换成一〇,也不能像上 20 那样转换成一十〇,应该是十. 特点总结: 数字为 10 时,结果为十: 数字大于 10 时, ...

  5. (转)对DotNet分布式应用搭建的考虑

    设计前的考虑和准备工作 1 对业务需求的理解重要性远远胜于对技术架构的理解 2 架构包含技术架构和业务架构 3 没有万能和通用的架构,只有符合自身业务需求的架构 4 架构本身的复杂性要截至在架构设计阶 ...

  6. [视频]MAC中如何单独放大文本字体

    我们知道使用MAC触控板的双指合拢手势可以进行放大或缩小操作,但其对应的是整个界面内容的放大及缩小,如果仅对其文本内容进行放大或缩小,可使用快捷键进行操作. 默认的 ”Command” + “=“   ...

  7. float闭合（清除浮动）和CSS HACK

    一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...

  8. 转：关于JAVA多线程同步

    转:http://lanvis.blog.163.com/blog/static/26982162009798422547/ 因为需要,最近关注了一下JAVA多线程同步问题.JAVA多线程同步主要依赖 ...

  9. struts2 知识梳理

    写此文章时,最新struts2版本:2.3.6 一:struts.xml配置详解: 1.<include> 表示引入其他配置文件 2.<constant> 定义常量 3.< ...

  10. js拖拽3D立方体旋转

    这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图 代 ...