拖拽的使用说明

拖拽基础

• 设置draggable属性为true，元素就可以拖拽（设置draggable为false则表示禁止拖拽）
• 文本、图片和链接默认可以拖拽

注意：文本需要选中后才能拖拽，链接需要设置href属性才能拖拽，图片直接就可以拖拽

    <p>我是文本</p>
    <a href="https://www.baidu.com">我是链接</a>
    <img style="width: 200px;height: 200px;" src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500">
    <div draggable>我是文本，我可以直接拖拽，因为我设置了draggable</div>

拖拽的过程

每一个可拖拽的元素，在拖拽的过程中，都会经历三个过程：

拖拽开始 —> 拖拽中 —> 拖拽结束

拖拽触发的事件

对象	事件	描述
被拖拽的对象	dragstart	在元素开始被拖拽时候触发
	drag	在元素被拖拽时反复触发
	dragend	在拖拽操作完成时触发
目的地对象	dragenter	当被拖拽对象进入目的地对象所占据的区域时触发
	dragover	当被拖拽对象在目的地对象内拖拽时触发
	dragleave	当被拖拽对象离开目的地对象所占据的区域时触发

<template>
  <div style="margin: 200px">
    <div style="margin-top: 40px;" draggable @dragstart="handleDragstart" @drag="handleDrag" @dragend="handleDragEnd">我是被拖拽对象</div>
    <div style="width: 200px;height: 200px;border: 1px solid red;line-height: 200px;text-align: center;margin-top: 200px;" @dragenter="handleDragEnter" @dragover="handleDragOver" @dragleave="handleDragLeave">我是目的地对象</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    handleDragstart(e) {
      console.log('dragstar', e)
    },
    handleDrag(e) {},
    handleDragEnd(e) {
      console.log('dragend', e)
    },
    handleDragEnter(e) {
      e.preventDefault()
      console.log('dragenter', e)
    },
    handleDragOver(e) {
      e.preventDefault()
    },
    handleDragLeave(e) {
      console.log('dragleave', e)
    }
  },
}
</script>

以鼠标的位置为基准点，触发dragenter和dragleave。

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们阻止浏览器这种默认行为。

拖拽事件对象

拖拽事件对象是DragEvent，它派生于MouseEvent，具有Event与MouseEvent对象的所有功能，并增加了dataTransfer属性。

展开dataTransfer可以看到里面有许多属性和方法

dataTransfer属性列表

属性	描述
dropEffect	获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move。
effectAllowed	提供所有可用的操作类型。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一。
files	包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。
items(只读)	提供一个包含所有拖动数据列表的 DataTransferItemList 对象。
types(只读)	一个提供 dragstart事件中设置的格式的 strings 数组。

dataTransfer方法列表

方法	描述
clearData()	删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则该方法不会产生任何效果。
getData()	检索给定类型的数据，如果该类型的数据不存在或 data transfer 不包含数据，则返回空字符串。
setData()	设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。
setDragImage()	用于设置自定义的拖动图像。

拖拽的简单运用

• dragstart设置值，drop接收值，
• dragenter和dragover阻止浏览器默认行为

<template>
  <div style="margin: 200px">
    <div style="margin-top: 40px;" draggable="true" @dragstart="handleDragstart">我是被拖拽对象</div>
    <div @drop="handleDrop" style="width: 200px;height: 200px;border: 1px solid red;display: flex;flex-direction: column;margin-top: 100px;" @dragenter="handleDragEnter" @dragover="handleDragOver">
      <div>我是目的地对象</div>
      <div v-html="test"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      test: ''
    }
  },
  methods: {
    handleDragstart(e) {
      e.dataTransfer.setData('someKey', '<div>我是被拖拽对象</div>')
    },
    handleDragEnter(e) {
      e.preventDefault()
    },
    handleDragOver(e) {
      e.preventDefault()
    },
    handleDrop(e) {
      this.test += e.dataTransfer.getData('someKey')
    }
  },
}
</script>