vuedraggable实现列表拖动排序过渡动画效果代码-html代码-BFW代码库

vuedraggable实现列表拖动排序过渡动画效果代码

代码语言：html

所属分类：拖放

代码描述：vuedraggable实现列表拖动排序过渡动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Sortable-1-8-4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuedraggable.umd.2.20.0.js"></script>
    <style >
        .demo {
            margin: 10px;
            text-align: left;
        }

        .col {
            width: 40%;
            flex: 1;
            padding: 10px;
            border: solid 1px #eee;
            border-radius: 5px;
            float: left;
        }

            .col + .col {
                margin-left: 10px;
            }

        .item {
            padding: 6px 12px;
            margin: 0px 10px 0px 10px;
            border: solid 1px #eee;
            background-color: #f1f1f1;
            text-align: left;
        }

            .item + .item {
                border-top: none;
                margin-top: 6px;
            }

            .item:hover {
                background-color: #fdfdfd;
                cursor: move;
            } 
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <!--使用draggable组件-->
        <div class="demo">
            <div style="padding-left:10px&quo.........完整代码请登录后点击上方下载按钮下载查看