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. iOS特殊字符处理

    你提供的 URL 字符串 里面可能包含某些字符,比如‘$‘ ‘&’ ‘?’...等,这些字符在 URL 语法中是具有特殊语法含义的, 比如 URL :http://www.baidu.com/ ...

  2. Java并发编程之阻塞队列

    1.什么是阻塞队列? 队列是一种数据结构,它有两个基本操作:在队列尾部加入一个元素,从队列头部移除一个元素.阻塞队里与普通的队列的区别在于,普通队列不会对当前线程产生阻塞,在面对类似消费者-生产者模型 ...

  3. 【CityHunter】基于LBS的AR体感游戏设计理念

    本人目前还不是游戏行业的圈内人士,并不懂得,游戏行业的生态圈,也不懂得,所谓的什么“中国市场环境”.所以不敢发表关于这方面的见解,不过我在这里想要插一句话,就是我认为啊,行业内,人与人之间还是有分层次 ...

  4. MySQL中日期与时间类型

    http://blog.sina.com.cn/s/blog_4d8730df01014jiy.html

  5. oracle--知识点汇总2---laobai

    --复制表 create table emp as(select * from scott.emp); select * from emp; --Demo1创建存储过程,实现将emp表comm为空时, ...

  6. Liunx下查看服务器硬件信息

    一.如何查看服务器的CPU 今天安装了9台Linux服务器,型号完全不一样(有DELL. HP和IBM服务器),又懒得去对清单,如何在Linux下cpu的个数和核数呢?另外,nginx的cpu工作模式 ...

  7. 学习笔记——k近邻法

    对新的输入实例,在训练数据集中找到与该实例最邻近的\(k\)个实例,这\(k\)个实例的多数属于某个类,就把该输入实例分给这个类. \(k\) 近邻法(\(k\)-nearest neighbor, ...

  8. SqlServer 产生随机数

    ALTER PROCEDURE [dbo].[usp_RandomNumber] ( , --随机数位数 --随机笔数 ) AS BEGIN DECLARE @T AS TABLE([Random N ...

  9. Java表格的简单使用一

    JTable组件使用的是模型/视图/控制器的设计方式,将可视化组件从其数据中分离出来,因此表格中的数据都封装在数据模型中.其中最重要的支持类就是TableModel类,这个类用来定义JTable类以及 ...

  10. Codeforces Round #262 (Div. 2) 1004

    Codeforces Round #262 (Div. 2) 1004 D. Little Victor and Set time limit per test 1 second memory lim ...