jQuery可拖拽排序列表jquery-sortable-lists

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的更多相关文章

jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
ListView列表拖拽排序
ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...
odoo开发笔记-tree列表视图拖拽排序
odoo列表tree视图拖拽排序实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...
vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

随机推荐

sublime3安装liveload，实现前端自动F5刷新html界面
这两天倒腾编辑器,atom实在太大了,还是sublime好用以前一直用sublime2, 然后更新到sublime3, 然后把一些必要的插件安装了一下:liveload(自动刷新): package ...
Mysql 命令大全
1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...
光盘刻录 CD刻录软件 Ashampoo Burning Studio特别版刻录CD就这么简单
著名的刻录软件Nero,其近上百M体积实在太大,而且安装之后的文件体积也有上G多.这么大的体积安装使用都不方便,好在现在很多都做得很不错,比如阿香婆的光盘刻录软件Ashampoo® Burning S ...
poi导出的excel的数字小数位过多？
最近在使用Apache的POI组件对Excel进行操作,在对excel导出的时候,导出的数字本来只有两位小数,得到的结果就变成了很多位小数.如下面的图所示: 虽然对单元格使用了setCellStyle ...
关于获取、设置css样式封装的函数入门版
<html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...
【codevs1515】跳
http://codevs.cn/problem/1515/ (题目链接) 题意给出一个棋盘,规定走到(x,y)的花费C(x,y)=C(x-1,y)+C(x,y-1),x=0或y=0时C(x,y)= ...
收集的在线图片压缩（jpg/png）
http://www.yasuotu.com/ http://www.jpegmini.com/ http://www.tumiaoya.com/ https://tinypng.com/(推荐) h ...
Beta阶段第五次Scrum Meeting
情况简述 BETA阶段第二次Scrum Meeting 敏捷开发起始时间 2016/12/15 00:00 敏捷开发终止时间 2016/12/16 00:00 会议基本内容摘要平稳推进参与讨论人员 ...
JavaScript中ActiveXObject对象
JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用.使用方法: newObj = new ActiveXObject( servername.typen ...
sublime text3好用的插件
1.安装package control sublime text3 的安装方法,ctrl+`,调出控制台输入 import urllib.request,os; pf = 'Package Contr ...

jQuery可拖拽排序列表jquery-sortable-lists

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

随机推荐

热门专题