拖拽属性vue实例

选中 → 拖动 → 释放

draggable属性的值： true， false， auto

拖放事件触发的派发对象 DragEvent 与鼠标派发对象 MouseEvent 相同，还增加了 dataTransfer 属性。该属性用于保存拖放的数据和交互信息，返回DataTransfer对象。

可被拖放元素开始被拖动时触发， 可在此时缓存一些被拖放元素的信息

可被拖放元素在拖动过程中定时触发

可被拖放元素拖动结束时触发， 该事件实际结束时间比鼠标松开时间晚， 比 dragleave 事件触发时间晚

拖动其他元素进入该元素时触发， 该事件触发时间为鼠标指针进入元素时

拖动其他元素在该元素中移动时触发

拖动其他元素离开该元素时触发， 该事件触发时间为鼠标指针离开元素时。
鼠标没有离开，拖动结束也会触发该事件，且在 dragend 事件之前执行

拖放动作完成时触发的事件， 该事件存在于 draglevel 事件之前， 可以作为鼠标松开瞬间的判断

== 注： dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素，所以需要完成拖放功能，要在这两个事件中添加阻止默认行为 e.preventDefault()。否则不会触发 drop 事件==

<template>
      <li v-for="(li, index) in lis" :class="{active: activeIndex == index, hover: hoverIndex == index}" draggable="true" @mousedown="mouseDown(index)" @dragstart="dragstart(li, index)" @dragenter.prevent="drapEnter(index)" @dragover.prevent @dragleave.prevent="dragLeave(index)" @drop.prevent="drop(li, index)">
        {{li.label}}
</template>
<script>
export default {
  name: 'model',
  data() {
    return {
      lis: [
        {label: 'LI001'},
        {label: 'LI002'},
        {label: 'LI003'},
        {label: 'LI004'},
        {label: 'LI005'},
        {label: 'LI006'},
        {label: 'LI007'},
        {label: 'LI008'},
      dragEnterItem: null,
      dragEnterIndex: undefined,
      dragItem: null,
      dragIndex: undefined,
      activeIndex: undefined,
      hoverIndex: undefined,
  created() {},
  methods: {
    mouseDown(index) {
      this.activeIndex = index
    dragstart(item, index) {
      this.dragItem = item
      this.dragIndex = index
    drop(item, index) {
      if (this.dragItem && this.dragIndex >= 0 && this.dragIndex !== index) {
        if(!item.children){
          item.children = []
        item.children.push(this.dragItem)
        this.lis.splice(this.dragIndex, 1)
        this.hoverIndex = null
        this.activeIndex = index
    drapEnter(index) {
      this.hoverIndex = index
    dragLeave(index) {
      this.hoverIndex = null
</script>
<style lang='scss' scoped>
  overflow: hidden;
    margin-right: 20px;
    margin-bottom: 30px;
    width: 200px;
    height: 200px;
    float: left;
    border: 1px solid #ccc;
    &:hover {
      background: rgba(#409EFF, .2);
    &.hover {
      background: rgba(#409EFF, .2);
    &.active {
      border: 1px solid #409EFF;
      background: rgba(#409EFF, .2);
</style>