# DND - 拖拽放置元素

# 1. 介绍

drag and drop，借助 HTML5 DND API 实现拖拽放置元素

# 2. HTML5 DND API

# 2.1. 事件

拖拽元素（被拖拽的元素，可移动的元素）：

dragstart
drag
dragend

拖拽容器（放置拖拽元素的元素）：

dragenter
dragover
dragleave
drop

# 2.2. 设置拖拽元素

<div draggable="true">拖拽元素</div>

# 2.3. 设置拖拽容器

浏览器关于 dragenter、dragover 事件的默认行为是不可放置元素，也就是说，取消掉浏览器的默认行为就可以让指定元素成为拖拽容器。

<div id="box">拖拽容器</div>

<script>
  const box = document.querySelector('#box');
  
  box.addEventListener('dragenter', (event) => {
    event.preventDefault();
  });
  box.addEventListener('dragover', (event) => {
    event.preventDefault();
  });
</script>

# 2.4. 拖拽数据

<div id="item" draggable="true">拖拽元素</div>
<div id="box">拖拽容器</div>

<script>
  var item = document.querySelector('#item');
  var box = document.querySelector('#box');
</script>

设置：

item.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('id', JSON.stringify({ name: 'zhangsan' }));
});

读取：

// 只有 drop 侦听器中可以读到数据
box.addEventListener('drop', (event) => {
  const data = event.dataTransfer.getData('id');
  console.log(data);
});

判断是否有数据：

// 所有 DragEvent 都可以判断是否有数据
box.addEventListener('dragenter', (event) => {
  const isExist = event.dataTransfer.types.contains('id');
  console.log(isExist);
});

# 3. 参考

本章目录