Blog： 做了个简单的h5拖动demo

<template>
  <div class="wrap">
    <div class="list-wrap">
      <div class="list">
        <div class="list-item" draggable="true" v-for="item of list" :key="item">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="drag-place">
      <div id="drop" class="input"></div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        list: new Array(100).fill(0).map((item, index) => index + 1)
      }
    },
    mounted() {
      var dragResult = false;    
      
      // 被放置元素的事件设置
      let place = document.getElementById('drop');

      place.ondragover = (ev) => {
        ev.preventDefault();
      }

      place.ondrop = (ev) => {
        ev.preventDefault();
        ev.stopPropagation();
        let data = ev.dataTransfer.getData("Text");
        let div = document.createElement('div')
        div.innerText = data
        div.className = 'block'
        place.appendChild(div);
        dragResult = true;
      }

      // 拖动元素的事件设置
      let list = document.getElementsByClassName('list')[0];
      let arr_li = document.getElementsByClassName('list-item');

      for (let i = 0; i < arr_li.length; i++) {

        arr_li[i].ondragstart = function(ev) {
          this.className = 'list-item opacity';
          this.setAttribute('disabled', true);
          // 设置这个属性被放置对象就可以从这里面取到值
          ev.dataTransfer.setData("Text", ev.target.innerText);
        }

        // 拖动过程中触发
        arr_li[i].ondrag = function() {}
        
        // 拖动结束触发
        arr_li[i].ondragend = function(ev) {
          const target = ev.target;
          // 通过一个全局变量判断是否拖放成功
          if (!dragResult) {
            // 拖放失败把opacity状态去除
            target.className = 'list-item';
          } else {
            list.removeChild(target);
            dragResult = false;
          }
        }
      }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .opacity {
    opacity: 0.2;
  }

  .wrap {
    display: flex;
  }


  .list-wrap {
    width: 300px;
    height: 600px;
    flex: 1
  }

  .list {
    width: 100%;
  }

  .list-item {
    width: 100%;
    height: 50px;
    line-height: 20px;
    border: 1px solid red;
  }

  .drag-place {
    flex: 1;
  }

  .input {
    width: 50%;
    min-height: 30px;
    float: right;
    border: 1px solid red;
  }
  
  .block {
    width: 20px;
    line-height: 20px;
    border: 1px solid lightblue;
  }
</style>