版权声明：本文为博主原创文章，未经博主同意不得转载。 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. jQuery.Ajax()执行WCF Service的方法

    Insus.NET有在上一篇<ASP.NET MVC呼叫WCF Service的方法>http://www.cnblogs.com/insus/p/3720547.html 直接呼叫WCF ...

  2. ABB机器人---PCSDK简介

    BB机器人为用户提供了大量便捷的二次开发及应用工具,PCSDK就是其中一项. 1) 首先,机器人使用PCSDK,必须要有pc interface选项. 2)此处举例使用C#编写简单界面,实现与机器人数 ...

  3. windows下mongodb集群搭建

    本文介绍在windows环境下如何搭建一个高可用性的mongodb集群.系统环境为win7,mongodb版本为3.6.3. 本文采用的是分片+副本集的方式搭建集群,将分别介绍如何使用副本集和分片来提 ...

  4. curl 使用示例 详细

    NAMEcurl - transfer a URL SYNOPSIScurl [options] [URL...] DESCRIPTIONcurl is a client to get documen ...

  5. sql语句之from子句

    如何从表中查询一个字端的数据 select  字段名  from  表名: 演示:从s_emp表中把月薪查询出来 select salary from s_emp ; (分号代表结束) 如何从表中查询 ...

  6. 5月23日——SPA单页面应用的原理

    一.什么是SPA(SPA 的概念) 单页 Web 应用 (single-page application 简称为 SPA),简单理解为:仅仅在web页面初始化时加载相应的HTML.JavaScript ...

  7. php简单实现二级联动

    <script type="text/javascript"> //当第一级选项发生变化的时候跳转 function jump() { location.href='? ...

  8. js-语言精粹-函数记忆

    函数可以将先前操作的结果记录在某个对象里,从而避免无谓的重复运算.这种优化方式被称为记忆(memoization).JavaScript的对象和数组要实现这种优化是非常方便的. 比如说,我们想要一个递 ...

  9. element-ui button组件 radio组件源码分析整理笔记（一）

    Button组件 button.vue <template> <button class="el-button" @click="handleClick ...

  10. OSGI企业应用开发（八）整合Spring和Mybatis框架（一）

    到目前为止,我们已经学习了如何使用Blueprint將Spring框架整合到OSGI应用中,并学习了Blueprint&Gemini Blueprint的一些使用细节.本篇文章开始,我们將My ...