jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动，拖动后回调,点击可以折叠树型结点，可以用来在后台模仿wordpress后台拖动菜单，实现多级菜单。

GitHub地址： https://github.com/camohub/jquery-sortable-lists

js代码：

var options = {

            placeholderCss: {'background-color': '#ff8'},

            hintCss: {'background-color':'#bbf'},

            isAllowed: function(cEl, hint, target){

                var parent_id= hint.parents('li').first().data('module');   //当前 parent id

                var current_id=cEl.data('module');    //当前选中的选项

              /**

               * 表示c选项只能给在自己内部排序与产生子类

               */

                if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c'){

                    hint.css('background-color', '#ff9999');

                    return false;

                }else{

                    hint.css('background-color', '#99ff99');

                    return true;

                }

            },

            opener: {

                 active: true,

                 close: 'images/Remove2.png',

                 open: 'images/Add2.png',

                 openerCss: {

                     'display': 'inline-block',

                     'width': '18px',

                     'height': '18px',

                     'float': 'left',

                     'margin-left': '-35px',

                     'margin-right': '5px',

                     'background-position': 'center center',

                     'background-repeat': 'no-repeat'

                 },

                 openerClass: ''

            }

        },

        sWrapper = $('#settingsWrapper');

    $('#sTree2, #sTree').sortableLists(options);

完整html

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<title>jQuery可拖拽排序的列表代码</title>

<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">

<link rel="stylesheet" type="text/css" href="css/github-dark.css" media="screen">

<style type="text/css">

    html, body, ul, li { margin:0; padding:0; }

    ul, li { list-style-type:none; color:#b5e853; border:1px solid #3f3f3f; }

    ul.sTree, ul{ padding:0px; background-color:#151515; }

    ul.sTree2 li, ul#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #3f3f3f; background-color:#3f3f3f; }

    li div { padding:7px; background-color:#222; Nborder:1px solid #3f3f3f; }

    li, ul, div { border-radius: 3px; }

    .red { background-color:#ff9999; }

    .blue { background-color:#aaaaff;}

    .green { background-color:#99ff99; }

    .gree2 { background-color:#bbffbb; }

    .yellow { background-color:#ff8; }

    .brown { background-color:#c26b2b; }

    .pT20 { padding-top:20px; }

    .pV10 { padding-top:10px; padding-bottom:10px; }

    .dN { display:none; }

    .zI1000 { z-index:1000; }

    .c1 { color:#b5e853; }

    .c2 { color:#63c0f5; }

    .c3 { color: #f77720; }

    .c4 { color: #888; }

    .bgC1 { background-color:#ccc; }

    .bgC2 { background-color:#ff8; }

    .small1 { font-size:0.8em; }

    .small2 { font-size:0.7em; }

    .small3 { font-size:0.6em; }

    .tAR { text-align:right; }

    .clear { clear:both; }

    img.descPicture { display:block; width:100%; margin:0 7px 30px 0; float:left; cursor:pointer; /*transition: all 0.5s ease;*/ }

    img.descPicture.descPictureClose { width:150px; }

    #sTree2 { margin:10px auto; }

</style>

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

<script src="js/jquery-sortable-lists.min.js"></script>

<script type="text/javascript">

$(function()

{

    var options = {

            placeholderCss: {'background-color': '#ff8'},

            hintCss: {'background-color':'#bbf'},

            isAllowed: function(cEl, hint, target){

                var parent_id= hint.parents('li').first().data('module');   //当前 parent id

                var current_id=cEl.data('module');    //当前选中的选项

              /**

               * 表示c选项只能给在自己内部排序与产生子类

               */

                if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c'){

                    hint.css('background-color', '#ff9999');

                    return false;

                }else{

                    hint.css('background-color', '#99ff99');

                    return true;

                }

            },

            opener: {

                 active: true,

                 close: 'images/Remove2.png',

                 open: 'images/Add2.png',

                 openerCss: {

                     'display': 'inline-block',

                     'width': '18px',

                     'height': '18px',

                     'float': 'left',

                     'margin-left': '-35px',

                     'margin-right': '5px',

                     'background-position': 'center center',

                     'background-repeat': 'no-repeat'

                 },

                 openerClass: ''

            }

        },

        sWrapper = $('#settingsWrapper');

    $('#sTree2, #sTree').sortableLists(options);

    $('#toArrBtn').on('click', function(){ console.log($('#sTree2').sortableListsToArray()); });

    $('#toHierBtn').on('click', function() { console.log($('#sTree2').sortableListsToHierarchy()); });

    $('#toStrBtn').on('click', function() { console.log($('#sTree2').sortableListsToString()); });

    $('.descPicture').on('click', function(e) { $(this).toggleClass('descPictureClose'); });

});

</script>

</head>

<body>

    <div class="container">

          <section id="main_content">

    <ul class="sTree2 listsClass" id="sTree2">

                <li id="item_a" data-module="a">

                    <div>选项 a</div>

                </li>

                <li class="sortableListsOpen" id="item_b" data-module="b">   <!-- sortableListsOpen  默认打开 -->

                    <div>选项 b</div>

                    <ul class="">

                        <li id="item_b1" data-module="b">

                            <div>选项 b1</div>

                        </li>

                        <li id="item_b2" data-module="b">

                            <div>选项 b2</div>

                        </li>

                        <li id="item_b3" data-module="b">

                            <div>选项 b3</div>

                        </li>

                        <li id="item_b4" data-module="b">

                            <div>选项 b4</div>

                        </li>

                        <li id="item_b5" data-module="b">

                            <div>选项 b5</div>

                        </li>

                    </ul>

                </li>

                <li class="" id="item_c" data-module="c">

                    <div>选项 c</div>

                    <ul class="">

                        <li id="item_c1" data-module="c">

                            <div>选项 c1</div>

                        </li>

                        <li id="item_c2" data-module="c">

                            <div>选项 c2</div>

                        </li>

                        <li id="item_c3" data-module="c">

                            <div>选项 c3</div>

                        </li>

                        <li id="item_c4" data-module="c">

                            <div>选项 c4</div>

                        </li>

                        <li id="item_c5" data-module="c">

                            <div>选项 c5</div>

                        </li>

                    </ul>

                </li>

                <li class="" id="item_d" data-module="d">

                    <div>选项 d</div>

                    <ul class="">

                        <li id="item_d1" data-module="d">

                            <div>选项 d1</div>

                        </li>

                        <li id="item_d2" data-module="d">

                            <div>选项 d2</div>

                        </li>

                        <li id="item_d3" data-module="d">

                            <div>选项 d3</div>

                        </li>

                        <li id="item_d4" data-module="d">

                            <div>选项 d4</div>

                        </li>

                        <li id="item_d5" data-module="d">

                            <div>选项 d5</div>

                        </li>

                    </ul>

                </li>

                <li class="" id="item_e" data-module="e">

                    <div>选项 e</div>

                </li>

                <li class="" id="item_f" data-module="f">

                    <div>选项 f</div>

                </li>

            </ul>

      </section>

    </div>

</body>

</html>

jQuery可拖拽排序列表jquery-sortable-lists的更多相关文章

  1. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  2. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

  4. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  5. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  6. ListView列表拖拽排序

    ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...

  7. odoo开发笔记-tree列表视图拖拽排序

    odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...

  8. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  9. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

随机推荐

  1. 自创yum源

    这里我们用U盘装完系统以后,我们要是使用yum命令的话,我们是装不上包的 这个时候我们装系统的时候 [root@kz-002 Packages]# df -h Filesystem Size Used ...

  2. Advanced Office Password Recovery安装后显示是英文版的

    一些才开始接触Advanced Office Password Recovery(即AOPR)的朋友,在安装Advanced Office Password Recovery的时候可能发现Advanc ...

  3. sql 关于查询时 出现的 从数据类型 varchar 转换为 numeric 时出错 的解决方法。

    出现这种问题 一般是查询时出现了 varchar 转 numeric 时出了错  或varchar字段运算造成的 解决方法: 让不能转的数不转换就可以了 sql的函数有个isNumeric(参数) 用 ...

  4. c#使用正则表达式抓取a标签的链接和innerhtml

    //读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...

  5. HDU 1817Necklace of Beads(置换+Polya计数)

    Necklace of Beads Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  6. rsync数据同步备份

    一.rsync简介 (1)rsync是什么? rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具. (2)rsync作用比较 远程拷贝:有点类似ssh的scp ...

  7. PostgreSQL Apt Repository

    PostgreSQL Apt Repository If the version included in your version of Ubuntu is not the one you want, ...

  8. spring aop的使用

    使用上次整合的s2sh工程,加入aop的功能.aop(面向切面编程)是一种对oop的完善,比如在进行数据库操作的时候执行方法前或者后加入一条日志记录,使用一个额外的类去做日志操作,让dao类专注地做它 ...

  9. 1JavaEE应用简介----青软S2SH(笔记)

    这本书主要是讲解Struts2,spring,Hibernate框架的, 因为工作中用的较多的是SpringMVC,Struts2用的较少,所以想系统学习一下,就买了这本书. 这本书是青软的,虽然是培 ...

  10. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...