H5拖拽效果（二）

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
上一篇介绍了h5的拖拽事件，但是仅仅这些事件还不能满足我们拖拽的需求，还有些属性是需要用到的。

dataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，它有以下几个属性方法：

• setData()
• getData()
• clearData()
• setDragImage() 使用方法
  这个属性方法是用于保存开始拖动直至放下(drag and drop）过程中的数据,它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型；属性有两个参数：第一个是允许拖拽的数据类型；第二是需要保存的数据，并且格式只能是字符类型。若是用相同类型重复添加，新数据会替换掉旧数据。

event.dataTransfer.setData('text/plain', '可拖拽文本');

若是用上面的方式存储数据，就可以用下面的方法取到数据。只需要传一个参数，就是保存时的数据类型。

event.dataTransfer.getData('text/plain');

当我们不需要的时候，可以将数据删除掉，即可以用clearData()清除数据。

event.dataTransfer.clearData("text/plain");

有时候觉得，拖动的时候，换张漂亮的图片或许会更好点，这里就有一个方法可以实现我们的需求。
发生拖拽时，会自动将被拖拽目标生成一张图片；拖拽过程中该图片会随着鼠标移动，我们可以使用setdragImage()方法来自定义拖拽反馈图片；这个方法有三个参数，第一个参数是图片的引用，后面两个参数是图片应该相对于鼠标指针出现的偏移量；常在dragstart()方法中使用。

event.dataTransfer.setDragImage(image, xOffset, yOffset);

多说无用，上个栗子吧：

 <div>
   <div
      id="drag"
      ondragstart="dragstart(event);"
      draggable="true"
      >拖我进去</div>
 </div>
 <div
    ondrop="drop(event);"
    ondragover="dragover(event);"
    >到我这儿来</div>
</body>

function dragstart(event) {
event.dataTransfer.setData("text/plain", ev.target.id);
 let img = new Image();
 img.src = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg';
 event.dataTransfer.setDragImage(img, 10, 10);
}

function dragover(ev) {
 event.preventDefault();
}

function drop(ev) {
 let data = ev.dataTransfer.getData("text");
 event.target.appendChild(document.getElementById(data));
}

上面就是需要把第一个元素拖到第二个元素里面进去；首先在dragstart将第一次元素的id以text的格式存起来，再创建一个图像，赋值图片地址，利用setDragImage()方法重新设置拖动时显示在鼠标下的图片；在drop方法中使用getData()拿到原本存的id，将id指向的元素appendChild到目标元素里。