vue实现拖动五线谱编曲效果代码-html代码-BFW代码库

vue实现拖动五线谱编曲效果代码

代码语言：html

所属分类：拖放

代码描述：vue实现拖动五线谱编曲效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
    <style>
        .red {
            font-size: 40px;
            color: black;

            width: 40px;
            height: 40px;


        }
        .green {
            position: relative;

            display: flex;
            background: black;

            width: 500px;
            height: 5px;
            color: white;
        }
        .white   .red,   .green   .red {
            z-index: 1;
            position: absolute;
            left: 50%;
            top: -24px;


        }

        .green   .red {
            top: -37px;
        }

        .white {
            position: relative;
            display: flex;
            background: white;

            width: 500px;
            height: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">


        <div class="green"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>

        <div class="white"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>
        <div class="green"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>

        <div class="white"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>
        <div class="green"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>

        <div class="white"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>
        <div class="green"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>

        <div class="white"  @drop="drop($event)" @dragover="allowDrop($event)">

        </div>
        <div class="green"  @drop="drop($event)&qu.........完整代码请登录后点击上方下载按钮下载查看