H5中的draggable

基本语法及事件

draggable 属性规定元素是否可拖动。必须设置，否则没有拖拽效果及事件触发

提示： 链接和图像默认是可拖动的。

提示： draggable 属性经常用于拖放操作

语法

<element draggable="true|false|auto">

值	描述
true	规定元素是可拖动的。
false	规定元素是不可拖动的。
auto	使用浏览器的默认特性。

在拖放过程中会触发以下事件：

在拖动目标上触发事件（源元素），作用于被拖拽元素上

ondragstart - 开始拖动元素触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

<div id="app">
  <div class="drag" draggable="true"></div>
  <div class="target"></div>
</div>

<script>
  const drag = document.querySelector('.drag')
  const target = document.querySelector('.target')

  drag.addEventListener('dragstart', ondragstart)
  drag.addEventListener('drag', ondrag)
  drag.addEventListener('dragend', ondragend)
  function ondragstart(event) {
    console.log('开始拖动')
  }
  function ondrag(event) {
    console.log('正在拖动')
  }
  function ondragend(event) {
    console.log('完成拖动')
  }
</script>

作用于目标元素

ondragenter - 进入其容器范围内触发（当被鼠标拖动的源元素进入目标容器范围内时触发）
ondragover - 被拖动的源对象在目标容器中拖动时触发
ondragleave - 拖动的对象离开目标容器时触发
ondrop - 释放鼠标时触发

Event.preventDefault

阻止默认事件，在ondragover中一定要执行preventDefault方法，否则ondrop不会被触发

<div id="app">
  <div class="drag" draggable="true"></div>
  <div class="target"></div>
</div>

<script>
  const drag = document.querySelector('.drag')
  const target = document.querySelector('.target')

  target.addEventListener('dragenter', ondragenter)
  target.addEventListener('dragover', ondragover)
  target.addEventListener('dragleave', ondragleave)
  target.addEventListener('drop', ondrop)
  function ondragenter(event) {
    console.log('进入入其容器范围内触发')
  }
  function ondragover(event) {
    event.preventDefault()
    console.log('容器中拖动时触发')
  }
  function ondragleave(event) {
    console.log('离开目标容器时触发')
  }
  function ondrop(event) {
    console.log('释放鼠标时触发')
  }
</script>

DataTransfer

在进行拖放操作的时候，dataTransfer对象可以用来保存被拖动的数据。它可以保存一项或多项数据、一种或多数数据类型。通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。

setData(type, data): 用于声明所发送的数据
getData(type)：用于获取指定type的数据注意：只能在ondrop中获取的到
clearData(type)：用于清除指定类型的数据

<div id="app">
  <div class="drag" draggable="true"></div>
  <div class="target"></div>
</div>

<script>
  const drag = document.querySelector('.drag')
  const target = document.querySelector('.target')

  drag.addEventListener('dragstart', dragstart)
  target.addEventListener('dragover', ondragover)
  target.addEventListener('drop', ondrop)

  function dragstart(event) {
    event.dataTransfer.setData('comp', JSON.stringify({name: 'WFT'}))
  }
  function ondragover(event) {
    event.preventDefault()
  }
  function ondrop(event) {
    let data = JSON.parse(event.dataTransfer.getData('comp'))
    console.log(data)
    // ...
    // 处理完数据 最后清除一下
    event.dataTransfer.clearData()
  }
</script>

在其它的事件(如ondragover、ondragleave等），是无法获取dataTransfer里面的值了。这是由于W3C要求对dataTransfer里的值进行保护[参考]。因此，如果需要在这些事件里获取数据，只能通过一个全局变量等其它方式来实现了。

event.dataTransfer.setDragImage(p_w_picpath, x, y)

setDragImage方法用于在拖放操作过程中，修改鼠标指针所指向的图像

示例一：

先看效果：

先说一下，这种和鼠标去拖拽某个元素跟着鼠标移动一直移动不一样的，那种核心用到三个鼠标事件是 onmousedown、onmousemove、onmouseup。咱们这种是拖拽、就是本身是不动的状态

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="drag" draggable="true"></div>
    <div class="target"></div>
  </div>

  <script>
    const drag = document.querySelector('.drag')
    const target = document.querySelector('.target')

    drag.addEventListener('dragstart', dragstart)
    target.addEventListener('dragover', ondragover)
    target.addEventListener('drop', ondrop)

    let curDragDom = null
    let curOffsetX = 0
    let curOffsetY = 0
    
    // 开始拖拽
    function dragstart(event) {
      curDragDom = this
      curOffsetX = event.offsetX
      curOffsetY = event.offsetY
    }
    // 在目标元素中拖拽 移除掉默认事件 否则不会触发 drop事件
    function ondragover(event) {
      event.preventDefault()
    }
    // 在目标容器中松开鼠标
    function ondrop(event) {
      if(!curDragDom) return
      let copyDom = curDragDom.cloneNode(true)
      copyDom.style.position = 'absolute'
      const { x, y } = this.getBoundingClientRect()
      copyDom.style.left = event.clientX - x - curOffsetX + 'px'
      copyDom.style.top = event.clientY - y - curOffsetY + 'px'
      copyDom.removeAttribute('draggable')
      this.appendChild(copyDom)
    }
  </script>

  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    #app {
      width: 100vw;
      height: 100vh;
      padding: 50px 0 0 50px;
      box-sizing: border-box;
      display: flex;
    }
    .drag {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .target {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      margin-left: 200px;
      position: relative;
      overflow: hidden;
    }
  </style>
</body>
</html>

示例二：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="upload" draggable="true">
      <div>将文件拖到此处进行上传</div>
    </div>
    <div class="images"></div>
  </div>

  <script>
    const upload = document.querySelector('.upload')
    const imageContainer = document.querySelector('.images')

    upload.addEventListener('dragover', ondragover)
    upload.addEventListener('drop', ondrop)

    function ondragover(event) {
      event.preventDefault()
    }

    function ondrop(event) {
      event.preventDefault()
      const { files } = event.dataTransfer
      Array.from(files).forEach(blob => {
        const url = window.URL.createObjectURL(new Blob([blob]))
        const img = document.createElement('img')
        img.src = url
        imageContainer.appendChild(img)
      })
    }
  </script>

  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    #app {
      width: 100vw;
      height: 100vh;
      padding: 50px 0 0 50px;
      box-sizing: border-box;
    }
    .upload {
      width: 360px;
      height: 180px;
      border: 1px dashed #c0c4cc;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .upload > div {
      color: #606266;
      font-size: 14px;
    }
    .images {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .images img {
      width: 300px;
      height: 180px;
      margin-right: 20px;
    }
  </style>
</body>
</html>