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. Pycharm如何添加第三方库和插件

    首先打开Pycharm,点击左上角  >>File  >>Setting . 打开之后点击 >>PRoject :untitled   >>Projec ...

  2. VS2010出现FileTracker : error FTK1011编译错误的解决办法

    VS2010出现FileTracker : error FTK1011不知道是不是vs2010的一个bug,反正有人提交了. FileTracker : error FTK1011编译错误的解决办法有 ...

  3. Maven 配置使用小技巧

    Spark开发中遇到了一些小问题,都是大神随便一个手指头帮我解决的.保持学习,积累吧! 一. 基于Intellij IDEA编辑器 1. 快捷键 注释/去注释   Ctrl+Shift+? 2. re ...

  4. 使用腾讯开发平台获取QQ用户数据资料

    <今天是七夕:祝大家七夕嗨皮,前可么么哒,后可啪啪啪> Tips:本篇博客将教你如何使用腾讯开发平台获取QQ用户资料 ----------------------------------- ...

  5. nginx + mysql + php相关源码包及安装

    nginx + mysql + php安装 引言 完整的搭建一个nginx+php-fpm+mysql的服务器,一直是我向做的,不过一致没有完成过,这次工作需要,终于安装成功了 我列出了我遇到的一些问 ...

  6. animate对颜色设置不起作用

    今天了解了一下stop的使用方法,但是实例中加入color:red的时候,动画效果没有实现,具体实例如下: http://jsbin.com/fezaroyene/edit?html,js,outpu ...

  7. ArcGIS Server开发教程系列（1） Arcgis server 10.1 的安装

    本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...

  8. js 闭包 理解

    1.什么是闭包 定义:是指有权访问另一个函数作用域中的变量的函数 创建闭包:在一个函数内部创建另一个函数 基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数(匿名函数) 可以 ...

  9. 即时搜索或input实时检测监听输入框变化

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...

  10. java 实现文件下载

    需求:把每天产生的日志文件,从服务器上下载下来 File file = new File(path); // 根据路径,获取File String filename = file.getName(); ...