拖拽的使用说明

拖拽基础

• 设置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>我是文本，我可以直接拖拽，因为我设置了draggablediv>
1
2
3
4

拖拽的过程

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

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

拖拽触发的事件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

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

拖拽事件对象

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

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

dataTransfer属性列表

dataTransfer方法列表

拖拽的简单运用

• 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', '
我是被拖拽对象
')
    },
    handleDragEnter(e) {
      e.preventDefault()
    },
    handleDragOver(e) {
      e.preventDefault()
    },
    handleDrop(e) {
      this.test += e.dataTransfer.getData('someKey')
    }
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33