最近的專案裡需要實現一個標籤元件，內部標籤可任意拖動排序。網上搜了一圈發現幾乎沒有現成的基於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複製程式碼

示例：

拖動、新增、刪除：

跨區域拖拽：

在一個標籤裡可以放任何東西，甚至。。。放一堆標籤，以實現多層標籤：

你幾乎可以對這些標籤做任何你想做的事，比如對它們進行排序：

當然列表形式也是可以的：