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.........完整代码请登录后点击上方下载按钮下载查看