vue-draggable拖动排序分类效果代码-html代码-BFW代码库

vue-draggable拖动排序分类效果代码

代码语言：html

所属分类：拖放

代码描述：vue-draggable拖动排序分类效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
    body{
        background: white;
    }
        .drag-wrapper {
            display: flex;
            justify-content: center;
        }

        ul {
            display: flex;
            flex-direction: column;
            padding: 3px !important;
            min-height: 70vh;
            width: 100px;
            float: left;
            list-style-type: none;
            overflow-y: auto;
            border: 2px solid #888;
            border-radius: 0.2em;
            background: #8adccc;
            color: #555;
            margin-right: 5px;
        }

        /* drop target state */
        ul[aria-dropeffect="move"] {
            border-color: #68b;
            background: #fff;
        }

        /* drop target focus and dragover state */
        ul[aria-dropeffect="move"]:focus,
        ul[aria-dropeffect="move"].dragover
        {
            outline: none;
            box-shadow: 0 0 0 1px #fff, 0 0 0 3px #68b;
        }

        /* draggable items */
        li {
            display: block;
            list-style-type: none;
            margin: 0 0 2px 0;
            padding: 0.2em 0.4em;
            border-radius: 0.2em;
            line-height: 1.3;
        }

        li:hover {
            box-shadow: 0 0 0 2px #68b, inset 0 0 0 1px #ddd;
        }

        /* items focus state */
        li:focus
        {
            outline: none;
            box-shadow: 0 0 0 2px #68b, inset 0 0 0 1px #ddd;
        }

        /* items grabbed state */
        li[aria-grabbed="true"]
        {
            background: #5cc1a6;
            color: #fff;
        }

@keyframes nodeInserted {
            from {
                opacity: 0.2;
            }
            to {
                opacity: 0.8;
            }
        }

        .item-dropzone-area {
            height: 2rem;
            background: #888;
            opacity: 0.8;
            animation-duration: 0.5s;
            animation-name: nodeInserted;
        }
    </style>



</head>


<body>
    <div id="app"></div>

    <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/vue-draggable.js"></script>

    <script>
        // if you are using library directly from CDN
        /.........完整代码请登录后点击上方下载按钮下载查看