本篇文章會介紹React DnD套件與一個實作範例

green-river-zt6f6

React DnD 是React生態系中常來實現拖曳效果的套件，其功能相當全面，可以實作幾乎任何拖曳效果（列表拖曳、任意位置拖曳、檔案拖曳等），本文將會介紹 React DnD，並且實作一個簡易的拖曳功能

大綱

名詞介紹

此部分可以搭配官方網站介紹：https://react-dnd.github.io/react-dnd/docs/overview

Items & Types

在畫面上拖曳的東西是一個item，他有特定的type

Item — 可完全定義的物件，例如：

• 拖曳卡片時，可以把卡片的item定為 { cardId: 42 }
• 拖曳西洋棋時，可以把棋子item定為 { fromCell: 'C5', piece: 'queen' }

Item 可以放入任合想要放的東西，例如callback funciton，會在drop時呼叫，用來實現一些效果

Type — 字串（或 JS symbol），描述拖曳的東西的類別，例如

• 拖曳卡片時，可以把卡片type定為 “card”
• 拖曳列表區塊時，可以把列表區塊type定為 “list”