版权声明：本文为博主原创文章，未经博主同意不得转载。 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. [日常] Linux下vim的常用命令总结

    vim按d表示剪切按dd剪切一行vim命令:命令模式 /关键字 n继续向下查找 vim的多行注释:1.按ctrl + v进入 visual block模式2.按上下选中要注释的行3.按大写字母I,再插 ...

  2. 漫画 | Redis常见面试问题（二）

    上期,小知和阿音在进行面试问答,可是呢,还没问完小知就表示累了想休息一会,然后就休息去了,但是,以为这样就完了吗? 当然不是,还得继续啊,嘿嘿嘿 注:对于第一种,需要应用程序自己处理资源的同步,可以使 ...

  3. 1.Strategy Pattern（策略模式）

    策略模式(Strategy Pattern): 我的理解,将代码中每个变化之处抽出,提炼成一个一个的接口或者抽象类,让这些变化实现接口或继承抽象类成为具体的变化类.再利用多态的功能,可将变化之处用接口 ...

  4. java工具包一：日期处理

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7846812.html 邮箱:moyi@moyib ...

  5. RBAC 介绍 (权限)

    RBAC是什么? RBAC是基于角色的访问控制(Role-Based Access Control )在RBAC中,权限与角色相关联,用户通过成为适当角色的成员而得到这些角色的权限.这就极大地简化了权 ...

  6. 大数据java基础day01

    day01笔记 1.==操作符和equals方法 equals方法存在于Object类中,所有类的equals方法都继承于Object 2.String类的常用方法 ①.replace()替换字符串 ...

  7. JS 闭包 p5

    终于到闭包了,写了一晚上,好激动: 首先闭包,个人是这样理解的(比较好记):闭包是一种能力,是一种可以访问内部函数作用域的能力或者说是一种行使权力,一旦你拥有这个能力,你将可以访问内部函数的作用域.

  8. idea加载JSTL库

    被这个错误缠了很长时间,偶然解决.eclipse for EE里导入JSTL没有问题,在JetIdea里就报classnotfound的异常. 解决方案:打包方式fix一下 新建library fil ...

  9. Flutter Widgets (Container/Row/Column/Image)

    俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个 ...

  10. SQL2008R2数据库日志太大收缩方法

    1.登陆项目平台数据库服务器.双击SQL Server Management Studio打开数据库管理.登陆数据库 2.如下图,打开数据库属性窗口 3.如下图,更改数据库恢复模式 4.如下图,收缩数 ...