拖放事件

Posted on In

拖拽元素事件：

  • dragstart：拖拽前触发
  • drag：拖拽前到拖拽结束之间，连续触发
  • dragend：拖拽结束触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

<script>
  let aLi = document.querySelectorAll("li")
  for (let li of aLi) {
    let count = 0
    li.ondragstart = function () {
      this.style.backgroundColor = "red"
    }
    li.ondrag = function () {
      console.log(count++) //连续触发
    }
    li.ondragend = function () {
      this.style.backgroundColor = ""
    }
  }
</script>

目标元素事件：

  • dragenter：进入目标元素触发，相当于 mouseover
  • dragover：进入目标到离开目标之间，连续触发
  • dragleave：离开目标元素触发，相当于 mouseout
  • drop：在目标元素上释放鼠标触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="div1" style="width:50px;height:50px;background:yellow"></div>

<script>
  let oDiv = document.querySelector("#div1")
  oDiv.ondragenter = function () {
    this.style.backgroundColor = "blue"
  }
  oDiv.ondragover = function (ev) {
    console.log("test") //连续触发
    //要想触发drop事件，就必须在dragover中阻止默认事件
    ev.preventDefault() //阻止默认事件
  }
  oDiv.ondragleave = function () {
    this.style.backgroundColor = "yellow"
  }
  oDiv.ondrop = function () {
    console.log("drop")
  }
</script>

dataTransfer 对象

  • setData()：设置数据 key 和 value 值(必须是 string)
  • getDate()；获取数据，根据 key 值获取 value
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
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

<div id="div1" style="width:50px;height:50px;background:yellow"></div>

<script>
  let oUl = document.querySelector("ul")
  let aLi = oUl.querySelectorAll("li")
  let oDiv = document.querySelector("#div1")
  for (let i = 0, length = aLi.length; i < length; i++) {
    aLi[i].index = i
    aLi[i].ondragstart = function (ev) {
      ev.dataTransfer.setData("index", this.index)
    }
  }
  oDiv.ondrop = function (ev) {
    oUl.removeChild(aLi[ev.dataTransfer.getData("index")])
    for (let i = 0, length = aLi.length; i < length; i++) {
      //重新赋索引值
      aLi[i].index = i
    }
  }
</script>
  • effectAllowed：设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move all, uninitalized)
  • setDragImage：参数为指定的元素、x 坐标值、坐标值
  • files：获取外部拖拽文件，返回一个 fileList 列表，fileList 下 type 属性返回文件类型

FileReader

FileReader 用于读取文件信息

  • readAsDataURL：参数为要读取的文件对象，将文件读取为 DataUrl
  • onload：当读取文件完成时触发此事件，通过 this.result 获取读取文件的数据，如果是图片，返回 base64 格式的图片数据