dragula实现树形无限级多级嵌套自由拖拽排序效果代码

代码语言:html

所属分类:拖放

代码描述:dragula实现树形无限级多级嵌套自由拖拽排序效果代码,各个item可以相互拖拽排序,甚至更换父子级别关系。

代码标签: dragula 无限拖拽 多级拖拽 树形拖拽 排序

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/dragula.min.css">

    <style>
        body{
            background: white;
        }
            .container {
              width: 400px;
              margin: 0 auto;
            }
            
            .nested {
              padding: 6px 0;
              border: 1px dashed #bbb;
            
            }
            
            .item {
              padding: 12px;
            }
    </style>


</head>

<body>
    <div class="container">
        <div class="nested">
            <div class="item">
                Item 1
                <div class="nested">
                    <div class="item">
                        Item 4
                        <div class="nested">
                            <div class="item">
                                Item 7
                                <div class="nested"></div>
                            </div>
                            <div class="item">
                                Item 8
                                <div class="nested"></div>
                            </div>
                        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0