版权声明：本文为博主原创文章，未经博主同意不得转载。 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. [MongoDB] mongodb与php

    windows上安装mongodb的php扩展 下载地址https://s3.amazonaws.com/drivers.mongodb.org/php/index.html 找到对应的php版本的d ...

  2. Oracle问题之ORA-12560TNS:协议适配器错误-转载

    作者:@haimishasha本文为作者原创,转载请注明出处:https://www.cnblogs.com/haimishasha/p/5394963.html 目录 Oracle问题之ORA-12 ...

  3. 【Linux】编辑文件时，箭头按键还有BACKSPACE按键不能正常使用的解决办法

    需要安装vim sudo apt-get  remove vim-common sudo apt-get install vim

  4. Android - 系统开机你知道多少？

    https://github.com/zhantong/interview/blob/master/Android/Android.md#38-android%E7%B3%BB%E7%BB%9F%E5 ...

  5. HDU1029(KB12-B)

    Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32767 K ( ...

  6. 排序算法(4)--Selection Sorting--选择排序[1]--Simple Selection Sort--简单(直接)选择排序

    1.基本思想   在要排序的一组数中,选出最小的一个数与第一个位置的数交换:然后在剩下的数当中再找最小的与第二个位置的数交换,如此循环到倒数第二个数和最后一个数比较为止. 2.实现原理 每趟从待排序的 ...

  7. CSS3实现的几个小loading效果

    昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家 1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading 这 ...

  8. element-ui 中的table的列隐藏问题

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...

  9. OSGI企业应用开发（九）整合Spring和Mybatis框架（二）

    上篇文章中,我们完成了在OSGI应用中整合Spring和Mybatis框架的准备工作,本节我们继续Spring和Mybatis框架的整合. 一.解决OSGI整合Spring中的Placeholder问 ...

  10. FineBI表单如何更新

    FineBI表单如何更新 1. 描述Cube单表更新,是指在某个业务包上面设置定时更新,在某个固定的时间点对某个的业务包中的特定表进行数据更新,部分更新分为两种,全量更新和增量更新,因而在更新策略上则 ...