vue拖动分类复制效果代码-html代码-BFW代码库

vue拖动分类复制效果代码

代码语言：html

所属分类：拖放

代码描述：vue拖动分类复制效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-sizing: border-box;
        }
        p {
          margin: 0;
        }
        .deck {
          background: #f5f5f5;
          border-radius: 10px;
          padding: 20px 30px;
        }
        .deck__body {
          display: flex;
          flex-wrap: wrap;
        }
        .card {
          background: #ddd;
          margin: 10px;
          width: 100px;
          height: 100px;
          border-radius: 10px;
          position: relative;
          user-select: none;
        }
        .card__name {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .card__name:hover {
          color: #fff;
        }
        .box {
          background: #6495ed;
          margin: 10px;
          width: 100px;
          height: 100px;
          border-radius: 10px;
          position: relative;
          cursor: pointer;
        }
        .box.-green {
          background: #66cdaa;
        }
        .box.-red {
          background: #ff6347;
        }
        .box p {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
        .flex {
          display: flex;
        }
        .-unselectable {
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          user-select: none;
          pointer-events: none;
        }
    </style>




</head>

<body>
    <div id="app">
        <div class="flex">
            <div class="box -red" @click="init">
                <p>init</p>
            </div>
            <div class="box" @click="add">
                <p>add</p>
            </div>
            <div class="box -green" @click="clean">
                <p>clean</p>
            </div>
        </div>
        <p>startDeck Id: {{ startDeckId }}</p>
        <p>enter deck id: {{ enterDeckId }}</p>
        <p>dragging card id: {{ draggingCardId }}</p>
        <p>removeFlag: {{removeFlag}}</p>
        <div class="deck" v-for="deck in decks" @dragover="dragOver(deck)" @mousemove="(e) =&gt; {mouseX = e.x;mouseY = e.y;}">
            <div class="deck__head">{{deck.name}}</div>
            <div class="deck__body">
                <div class="card" v-for="card in deck.cards" draggable="true" @dragstart="dragStart(deck, card, $event)" @dragend="dragEnd">
                    <div class="card__name -unselectable">{{card.name}}</div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script>
        new Vue({
         el: "#app",
         data: {
           startDeckId: null,
           draggingCardId: null,
           enterDeckId   : null,
  .........完整代码请登录后点击上方下载按钮下载查看