jquery-ui实现无线级无限嵌套拖拽排序效果代码

代码语言:html

所属分类:拖放

代码描述:jquery-ui实现无线级无限嵌套拖拽排序效果代码

代码标签: jquery-ui 排序 拖拽 嵌套 多级 无线

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script>




    <style type="text/css">
        body{
            background: black;
        }
            .sortable {
                padding-left: 20px;
                border: 3px solid white;
                background: #FFCC33;
              
                margin: 10px;
            }
    </style>


</head>

<body>

    <div class="sortable">
        <div class="notsortable">Item 1 (disabled)</div>
        <div class="sortable">
            <div>Item 6.5.1</div>
            <div>Item 6.5.2</div>
            <div>Item 6.5.3</div>
            <div class="notsortable">Item 6.5.4 (disabled)</div>
            <div class="notsortable">Item 6.5.5 (disabled)</div>
            <div class="sortable">
                <div class="notsortable">Item 6.5.5.1 (disabled)</div>
                <div class="notsortable">Item 6.5.5.2 (disabled)</div>
            </div>
        </div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div class="notsortable">Item 4 (disabled)</div>
        <div class="notsortable&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0