记录一下新学习到的拖拽功能。

H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图：

接着就是上代码：
HTML以及CSS部分：比较简单就不多说了

<div class="wrapper">
    <section class="show">
      <h1>拖动你喜欢的图片</h1>
      <div class="tshirt">
        <img src="" alt="">
        <div class="empty"></div>
      </div>
    </section>
    <section class="patterns">
      <img draggable="true" src="./pic1.jpeg" alt="蜡笔小新">
      <img draggable="true" src="./pic2.jpeg" alt="折木奉太郎">
      <img draggable="true" src="./pic3.jpeg" alt="樱木花道">
    </section>
 </div>
<style>
    .wrapper {
      display: flex;
    }
    .show {
      width: 550px;
      height: 550px;
      background-color: #eee;
    }
    .patterns img{
      width: 300px;
      height: 300px;
      margin-left: 50px;
      border: 4px solid #eee;
    }
    .empty {
      width: 300px;
      height: 300px;
    }
    .empty img {
      width: 300px;
      height: 300px;
    }
  </style>

js部分：

<script>
    const empty = document.querySelector('div.empty')
    const h1 = document.querySelector('h1')
    let name

    // 拖动事件开始
    document.addEventListener('dragstart', (e) => {
      name = e.target.alt
    }, false)

    document.addEventListener('drag', (e) => {
      // 拖拽开始时添加边框
      e.target.style.border = '5px dashed red'
      empty.style.border = '5px dashed red'
    })

    document.addEventListener('dragend', (e) => {
      // 拖拽结束时边框消失
      e.target.style.border = 'none'
      empty.style.border = 'none'
      h1.innerHTML = '拖动你喜欢的图片'
      h1.style.color = 'black'
    }, false)

    empty.addEventListener('dragenter', (e) => {
      if (empty.firstChild) {
        empty.removeChild(empty.firstChild)
      }
      h1.innerHTML = name
      h1.style.color = 'red'
    }, false)

    empty.addEventListener('dragover', e => {
      e.preventDefault()
    }, false)

    empty.addEventListener('drop', e => {
      e.preventDefault()
      e.target.appendChild(document.querySelector(`img[alt=${name}]`))
    }, false)

  </script>

首先是拿到我们需要用到的元素以及定义一些变量

拖拽事件开始时，将img标签里alt属性赋值给name，用于后面显示在标题上

拖动时为拖拽的元素以及要放置的元素设置边框，便于我们看到效果，效果如下：


当拖拽元素进入empty元素是，需要判断empty是否有子节点，如果有则删除，然后将标题设置为上面拖拽开始时保存的name属性并且改变字体颜色

当拖拽元素放置时需要将这个图片放置到empty元素里面，也就是用appendChild将img加入元素中，drop事件跟dragover事件都调用了preventDefault事件来阻止默认事件的发送，那是因为浏览器默认不能在拖拽以后进行放置，所以需要我们手动的取消默认事件。

拖拽结束时将边框设置为none，并且改变标题文本及相关样式，效果如下：


到这里，一个简单的拖拽功能就结束啦，由于是第一次接触拖拽功能，所以记录一下，以便下次查看。