一個可拖拽的React標籤組件

最近的項目裏須要實現一個標籤組件，內部標籤可任意拖動排序。網上搜了一圈發現幾乎沒有現成的基於react的組件能很好的知足需求。

較爲知名的是 react-dnd，然而它彷佛只支持把一個元素移到固定的位置，我須要的是一個標籤能夠移動到任意位置的兩個標籤之間（每一個標籤長度不固定，因此沒有固定的位置。另外還得支持多行，因此光是可多拽的列表也不行）
知足上述需求的是 react-tags，但該組件很不靈活，想要修改樣式、對標籤進行一些額外操做很不方便，標籤內部必須是文字而不能是任意元素，且不支持「跨區域拖拽」（見下文第二張gif圖）

因而我就乾脆本身寫了一個：

React Draggable Tags

它很好用，最短只要幾行代碼；又很靈活，你能夠進行添加、修改、刪除、排序等操做，能夠在一個標籤裏聽任何東西，能夠設置任何你想要的樣式（該組件自己並不包含樣式）。

實際上，不單單是標籤，不少須要相似拖拽功能的情景均可以使用它。

文檔和demo地址見：https://github.com/YGYOOO/react-draggable-tags （順便求star XD）（一開始花了一個下午寫好的，因此有些bug，如今應該比較穩定了。若是有，歡迎提issue XD）

更新：現已支持手機端！

安裝

npm install react-draggable-tags --save複製代碼

示例：

拖動、添加、刪除：

跨區域拖拽：

在一個標籤裏能夠聽任何東西，甚至。。。放一堆標籤，以實現多層標籤：

你幾乎能夠對這些標籤作任何你想作的事，好比對它們進行排序：

固然列表形式也是能夠的：