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 ...

随机推荐

Neural Style学习1——简介
该项目是Github上面的一个开源项目,其利用卷积神经网络的理论,参照论文A Neural Algorithm of Artistic Style,可以实现一种效果:两张图片,一张取其内容,另一张取其 ...
yii2.0归档安装方法
我前几天用composer安装一直没成功我就用归档的方法安装了所以这篇文字只帮助那些用归档方法安装的朋友 Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii自带了丰富的功 ...
移动端meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...
HttpResponse的使用方法
HttpResponse的使用方法: HttpRequest类是一个封闭HTTP提交信息的类型,而封闭HTTP输出信息的类型就是HttpResponse类,使用HttpResponse类可以实现三种类 ...
zTree简单实现
用zTree简单实现从后台传数据生成树 1.在jsp上引入js,jsp的head完整的部分 <%@ page language="java" contentType=&quo ...
Ubuntu学习总结-07 Nodejs和npm的安装
一安装NodeJS 1 下载nodejs源码从以下网址下载最新的Nodejs源码 https://nodejs.org/en/download/ 2 安装依赖的 python,gcc,g++ 函数 ...
es_Linux
命令:echo 显示.印出 echo $PATH 通过 "su - vbird"" 这个指令来变换到 vbird身份权限: rwx rwx rwx 以4 2 1数字表 ...
linux零基础入门总结
啊,notepad++贴过来怎么对齐格式这么糟糕呢? #root用户 $普通用户 linux命令清屏clear翻页清屏 CRT中ctrl+L reset"清空 CRT中不起作用 ...
c标签遍历List<Map<String, Object>> 数据格式
<c:forEach varStatus="loop" var="dataMap" items="${dataMap}"> &l ...

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

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

随机推荐

热门专题