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: 28px;
            color: black;





        }
        .green {
            position: relative;

            display: flex;
            background: grey;

            width: 500px;
            height: 10px;
            color: white;
        }

        .white   .red,   .green   .red {
            z-index: 1;
            position: absolute;

            top: -24px;

            font-size: 46px;
            -webkit-text-fill-color: black;
            /*文字的填充色*/
            -webkit-text-stroke: 0.5px white;


        }

        .green   .red {
            top: -32px;

        }

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

            width: 500px;
            height: 25px;
            color: white;
        }
        .hover {
            background: #996633 !important;
        }
    </style>
</head>
<body>
    <div id="app">


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

        </div>

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

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

        </div>

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

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

        </div>

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

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

        </div>

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

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

        </div>
        <div style="display:flex;">
            <div class="red" draggable="true" @dragstart="drag($event)">
                ♮
            </div>
            <div class="red" draggable="true" @dragstart="drag($event)&quo.........完整代码请登录后点击上方下载按钮下载查看