简单的拖拽模型

一，前言

1.本文通过实现一个物体的拖拽，简单介绍一下拖拽的api

2.一个简单的拖拽模型，包含目标元素，拖拽过程，和容器元素

二，目标元素

1.要想实现拖拽，首先我们要设置目标元素的draggable属性为true，允许元素是可拖动的

<div id="target" draggable="true"></div>

2.为目标元素绑定拖拽的事件，可以直接绑定在标签元素上，或者使用addEventListener，可以根据实际需求选择要绑定事件

（1）dragstart 开始拖拽执行一次
（2）drag 拖拽中一直执行
（3）dragend 结束拖拽执行一次

<div id="target" draggable="true" ondragstart="handleDragStart"></div>

const dom = document.getELementById("target")
dom.addEventListener('dragstart', handleDragStart)

3.通常我们在拖拽的时候，需要传递一些数据，可以通过拖拽事件的事件对象的dataTransfer.setData传递

const handleDragStart = (event: any) => {
  // 拖动开始时设置数据传输
  const {
    size,
    title,
    id
  } = event.target.dataset;  //从目标元素的dataset获取数据

  event.dataTransfer.setData("size", size); // 在通过事件对象的`dataTransfer.setData`传递给容器
  event.dataTransfer.setData("title", title);
  event.dataTransfer.setData("title", id);
};

三，容器元素

1.对于容器元素，我们要绑定，dragover，和drop，来监听目标元素的降落

（1）dragover 拖拽元素经过时触发
（2）dragenter 元素进入时触发
（3）dragleave 元素离开时触发
（4）drop 拖拽元素放下时触发

<div id="box"  ondragover="handleDragOver" ondrop="handleDrop"></div>

2.dragover一定要绑定，且要阻止默认行为

const handleDragOver = (event: any) => {
  event.preventDefault();
};

3.我们可以在drop事件获取元素传递的值，

const handleDrop = (event: any) => {
  //获取拖拽元素数据，可以通过获取的元素的值，做一下业务
  const transferSize = event.dataTransfer.getData("size");
  const title = event.dataTransfer.getData("title");
  const id= event.dataTransfer.getData("title");
  // 获取目标元素dom,放入容器元素
  event.target.appendChild(document.getElementById(id))
}