版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/wuchengzeng/article/details/31766235

最好的jquery列表拖动排列自己定义拖动层排列

代码一预览:

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

<title>最好的jquery列表拖动排列自己定义拖动层排列</title>

<meta name="description" content="jquery列表模块拖动层，当点击或拖动列表时，能够自己定义任意拖放列表模块到对应位置。支持回调函数的拖动层。" />

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

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

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

body{font-family:Arial;font-size:12pt;color:#333;}

h1{font-size:16pt;}

h2{font-size:13pt;}

/* demo */

.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}

.demo h2{margin:30px 0 20px 0;color:#3366cc;}

/* dragfunction */

.dragfunction{margin:40px 0 0 0;}

.dragfunction dt{height:30px;font-weight:800;}

.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;}

/* dragsort */

.dragsort-ver li{height:30px;line-height:30px;}

.dragsort{width:350px;list-style-type:none;margin:0px;}

.dragsort li{float:left;padding:5px;width:100px;height:100px;}

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

<div class="demo">

<h1>jQuery列表拖动排列演示</h1>

<h2>简单的一组列表:</h2>

<ul class="dragsort-ver">

<li>你猜</li>

<li>你不猜</li>

<li>你不猜你不猜</li>

<li><input type="checkbox" name="intro_fields[]" value="猜猜"/>猜猜</li>

<li>你猜不猜</li>

<li>你猜不猜不猜</li>

<li>你不猜不猜</li>

</ul>

<br/>

<script type="text/javascript">

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

</script>

<h2>两组列表拖放:(无限组拖放)</h2>

<ul class="dragsort" id="list2" style="float:right;">

<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 class="dragsort" 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>

<!-- 排序保存在这里能够检索server上的回传 -->

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

scrollSpeed: 5

});

function saveOrder() {

var data = $("#list1 li").map(function(){

return

$(this).children().html();

}).get();

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

};

</script>

<div style="clear:both;"></div>

<h2>Usage</h2>

$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });<br/>

<br/>

<dl class="dragfunction">

<dt>dragSelector</dt>

<dd>CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。

</dd>

<dt>dragSelectorExclude</dt>

<dd>CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。</dd>

<dt>dragEnd</dt>

<dd>拖动结束后将被调用的回调函数.</dd>

<dt>dragBetween</dt>

<dd>设置为“true”。假设你要启用多组列表之间拖动选定的列表。 默认值是false。</dd>

<dt>placeHolderTemplate</dt>

<dd>拖动列表的HTML部分。默认值是"<li></li>".</dd>

<dt>scrollContainer</dt>

<dd>CSS选择器的元素，作为滚动容器。比如溢出的div设置为自己主动。

默认值是“窗体“.</dd>

<dt>scrollSpeed</dt>

<dd>一个数字。它代表了速度，页面拖动某一项时。将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 假设设置为"0"以禁用滚动。默认值是"5".</dd>

</dl>

</div>

</body>

</html>

代码2预览:

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery UI sortable()实现拖动排序</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>

        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    </head>

    <body>

       <script>

        $(function() {

          $( ".sortable" ).sortable({

          cursor: "move",

          items :"li",                        //仅仅是li能够拖动

          opacity: 0.6,                       //拖动时，透明度为0.6

          revert: true,                       //释放时，添加动画

          update : function(event, ui){       //更新排序之后

              alert($(this).sortable("toArray"));

          }

         });

       });

      </script>

      <ul class="sortable">

        <li class="ui-state-default"  id="1">第1项</li>

        <li class="ui-state-default"  id="2" >第2项</li>

        <li class="ui-state-default"  id="3">第3项</li>

      </ul>

    </body>

</html>

代码压缩包下载: http://pan.baidu.com/s/1mgxAIy0

谢谢关注

viewmode=list" rel="nofollow" style="color:rgb(202,0,0);text-decoration:none;font-size:14px;font-family:Arial;line-height:26px;text-indent:28px;">websites博客!

最好用的jquery列表拖动排列(由项目提取)的更多相关文章

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

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

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

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

  3. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  4. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. jquery可拖动表格调整列格子的宽度大小(转)

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

  6. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  7. jQuery实现拖动布局并将排序结果保存到数据库

    很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的.当用户清空客户端的cookie或浏览器的cookie过 ...

  8. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  9. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

随机推荐

  1. ASP.NET MVC验证码演示(Ver2)

    前一版本<ASP.NET MVC验证码演示>http://www.cnblogs.com/insus/p/3622116.html,Insus.NET还是使用了Generic handle ...

  2. echart 数据视图 样式重写

    来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写 在echarts.js中,点击折线图的数据 ...

  3. ADO.NET 【攻击及防御】

    sql字符串注入攻击 SQL注入攻击是黑客对数据库进行攻击的常用手段之一.SQL注入的手法相当灵活 SQL注入攻击会导致的数据库安全风险包括:刷库.拖库.撞库. 一般来说,SQL注入一般存在于形如:H ...

  4. [android] 轮播图-无限循环

    实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int ...

  5. 算法时间复杂度、空间复杂度(大O表示法)

    什么是算法? 计算机是人的大脑的延伸,它的存在主要是为了帮助我们解决问题. 而算法在计算机领域中就是为了解决问题而指定的一系列简单的指令集合.不同的算法需要不同的资源,例如:执行时间或消耗内存. 如果 ...

  6. 数据结构与算法--最小生成树之Prim算法

    数据结构与算法--最小生成树之Prim算法 加权图是一种为每条边关联一个权值或称为成本的图模型.所谓生成树,是某图的一棵含有全部n个顶点的无环连通子图,它有n - 1条边.最小生成树(MST)是加权图 ...

  7. 【mysql】连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案

    1. 增加 MySQL 的 wait_timeout 属性的值.  修改 /etc/mysql/my.cnf文件,在 [mysqld] 节中设置: # Set a connection to wait ...

  8. python匿名函数lambda与switch的实现

    1,lambda的语法跟es6的箭头函数差不多 >>> show=lambda x,y: x * y >>> show( 10, 20 ) 200 2,递归求阶乘 ...

  9. POJ1269(KB13-D 计算几何)

    Intersecting Lines Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16681   Accepted: 71 ...

  10. if语句格式及流程

    if语句是条件判断功能 1. if 条件: if语句块 执行流程:判断条件是否为真. 如果真. 执行if语句块 2. if 条件: if语句块 else: else语句块 执行流程:判断条件是否为真. ...