vue不用组件写一个拖放代码

代码语言:html

所属分类:拖放

代码描述:vue不用组件写一个拖放代码

代码标签: 一个 拖放

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

 <html>
      
      <head>
           <meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
        <style>
        body{
            padding: 50px;
        }
        .droptarget {
      float: left; 
      width: 100px; 
      height: 65px;
      margin: 15px;
      padding: 10px;
      background: red;
      color: white;
      text-align: center;
    }
    </style>
    
      </head>
      <body>
        <div id="app">
          
          <div
            class="droptarget"
            v-on:drop="drop"
            v-on:dragover="allowDrop"
          >
            <p
            v-on:dragstart="dragStart"
              v-on:drag="dragging"
              draggable="true"
              id="dragtarget"
            >
拖动我            </p>
          </div>
    
          <div
            class="droptarget" style="background:blue;"
            v-on:drop="drop"
            v-on:dragover="allowDrop"
          ></div>
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0