Sortable+jquery实现多级菜单增删改及拖动排序效果代码-html代码-BFW代码库

Sortable+jquery实现多级菜单增删改及拖动排序效果代码

代码语言：html

所属分类：拖放

代码描述：Sortable+jquery实现多级菜单增删改及拖动排序效果代码，以课程目录为例，演示了课程一级目录添加修改删除，二级目录增加修改删除，一级二级目录的拖动排序效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|Sortable.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        function bindevent() {}
        bready(function() {
            $(".addpbtn").live("click",function() {
                $(this).parent().siblings(".tile__list").append('<p><span>未命名</span><i class="fa  fa-trash-o delppbtn"></i></p>');

            });
            $(".addbtn").live("click",function() {
                $("#chapter").append('<div class="layer tile" data-force="222"><div class="tile__name">  <span>未命名</span><i class="fa fa-plus-square-o addpbtn"></i><i class="fa fa-trash-o delpbtn"></i></div><div class="tile__list"></div></div>');
                [].forEach.call(document.getElementById('chapter').getElementsByClassName('tile__list'), function(el) {
                    Sortable.create(el, {
                        group: 'photo', animation: 150
                    });

                });
               
            });
            $(".delppbtn").live("click", function() {
                $(this).parent().remove();
            });
            $(".delpbtn").live("click", function() {
                $(this).parent().parent().remove();
            });
            $(".tile__name span").live("dblclick", function() {
                $(this).attr("contenteditable", true);
            });

            $(".tile__name span").live("blur", function() {
                $(this).attr("contenteditable", false);
            });
            $(".tile__list span").live("dblclick", function() {
                $(this).attr("contenteditable", true);
            });
            $(".tile__list span").live("blur", function() {
                $(this).attr("contenteditable", false);
            });
            Sortable.create(document.getElementById('chapter'), {
                animation: 150, draggable: '.tile', handle: '.tile__name'
            });

            [].forEach.call(document.getElementById('chapter').getElementsByClassName('tile__list'), function(el) {
                Sortable.create(el, {
                    group: 'photo', animation: 150
                });

            });
        });
    </script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        #book {
            background: white;
            padding: 10px;
        }
        #chapter .bookname {
            padding: 10px 10px 10px 0;
            font-size: 18px;
      .........完整代码请登录后点击上方下载按钮下载查看