版权声明：本文为博主原创文章，未经博主同意不得转载。 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. WCF 学习总结1 -- 简单实例

    从VS2005推出WCF以来,WCF逐步取代了Remoting, WebService成为.NET上分布式程序的主要技术.WCF统一的模型整合了以往的 WebService.Remoting.MSMQ ...

  2. SQL SERVER 快捷键收录

    1.大小写转换快捷键 Ctrl+Shift+U 转为大写 Ctrl+Shift+L 转为小写  

  3. Docker初次使用与安装过程

    Docker入门 Docker 简介 Docker有两个版本: 社区版(CE) 企业版(EE) Docker Community Edition(CE)非常适合希望开始使用Docker并尝试使用基于容 ...

  4. jstl 中无法使用EL语句。异常信息：According to TLD or attribute directive in tag file, attribute value does not accept any expressions

    JSTL 标签库的有两种 taglib 伪指令, 其中 RT 库即是依赖于 JSP 传统的请求时属性值, 而不是依赖于 EL 来实现: 只要将 <%@ taglib uri="http ...

  5. Chinese remainder theorem again（中国剩余定理）

    C - Chinese remainder theorem again Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:% ...

  6. c# IEnumerable和IEnumerator枚举器

    一 : IEnumerable 公开枚举数,该枚举数支持在非泛型集合上进行简单迭代. IEnumerable是可以枚举的所有非泛型集合的基接口,IEnumerable包含单个方法GetEnumerat ...

  7. 洛谷P4396 [AHOI2013]作业(树套树)

    题意 题目链接 Sol 为什么一堆分块呀..三维数点不应该是套路离线/可持久化+树套树么.. 亲测树状数组套权值线段树可过 复杂度\(O(nlog^2n)\),空间\(O(nlogn)\)(离线) # ...

  8. HTML中的元素分类

    HTML中有很多的标签(元素),可以按照这些元素在网页中所占的空间情况进行分类.具体可以这样简单的分类: 1.块级元素:指的是在网页中该元素独自占据网页的一行显示区域,即当使用了该元素后,该元素会使下 ...

  9. SD从零开始11-12

    SD从零开始11 定价中的条件技术(Condition Technique in Pricing) 定价程序Pricing Procedure 所有定价中允许的条件类型都包含在定价程序中: 通过为每个 ...

  10. 安卓测试【三】adb简单命令及monkey使用

    Ⅰ 配置好android sdk环境变量之后,将android手机连接到电脑上,进行一些adb的简单命令的操作. adb,安卓调试桥,android   sdk的一个工具.直接操作管理安卓模拟器或者真 ...