列表上下移动 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
    <title>jQuery UI 排序（Sortable） - 显示为网格</title>
    <link rel="stylesheet" href="http://www.sortablejs.com/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <link rel="stylesheet" href="http://www.sortablejs.com/assets/css/Features-Clean.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="Sortable.min.js"></script>
    <style>
    
    
    </style>

</head>
<body>
<div id="nestedDemo" class="list-group col nested-sortable">
    <div class="list-group-item nested-1">Item 1.41
        <div class="list-group nested-sortable" id="a1">
            <div class="list-group-item nested-2">Item 2.11</div>
            <div class="list-group-item nested-2">Item 2.21</div>
            <div class="list-group-item nested-2">Item 2.31</div>
            <div class="list-group-item nested-2">Item 2.41</div>
        </div>
    </div>
    <div class="list-group-item nested-1">Item 1.4
        <div class="list-group nested-sortable" id="a2">
            <div class="list-group-item nested-2">Item 2.1</div>
            <div class="list-group-item nested-2">Item 2.2</div>
            <div class="list-group-item nested-2">Item 2.3</div>
            <div class="list-group-item nested-2">Item 2.4</div>
        </div>
    </div>
</div>

<script>
    new Sortable(document.getElementById('a1'), {
        group: {
            name:"1",
            pull:false
        },
        animation: 150
    });
    new Sortable(document.getElementById('a2'), {
        group: {
            name:"1",
            pull:false
        },
        animation: 150
    });
</script>

</body>
</html>

 

引用的Sortable文件 链接: https://pan.baidu.com/s/1-li2V6HyqAuSHcm6zgibXA?pwd=uqp2 提取码: uqp2 

posted @ 2022-01-18 17:43  超级玛丽和大力水手  阅读(13)  评论(0)  编辑  收藏  举报