寫了一個(gè)簡(jiǎn)單、靈活的React標(biāo)簽組件

arashicage 發(fā)布于2019-08-22 17:36 / 1702人閱讀

摘要：最近的項(xiàng)目里需要實(shí)現(xiàn)一個(gè)標(biāo)簽組件，內(nèi)部標(biāo)簽可任意拖動(dòng)排序。網(wǎng)上搜了一圈發(fā)現(xiàn)幾乎沒有現(xiàn)成的基于的組件能很好的滿足需求。

最近的項(xiàng)目里需要實(shí)現(xiàn)一個(gè)標(biāo)簽組件，內(nèi)部標(biāo)簽可任意拖動(dòng)排序。網(wǎng)上搜了一圈發(fā)現(xiàn)幾乎沒有現(xiàn)成的基于react的組件能很好的滿足需求。

較為知名的是react-dnd，然而它似乎只支持把一個(gè)元素移到固定的位置，我需要的是一個(gè)標(biāo)簽可以移動(dòng)到任意位置的兩個(gè)標(biāo)簽之間（每個(gè)標(biāo)簽長(zhǎng)度不固定，所以沒有固定的位置）
滿足上述需求的是react-tags，但該組件很不靈活，想要修改樣式、對(duì)標(biāo)簽進(jìn)行一些額外操作很不方便，標(biāo)簽內(nèi)部必須是文字而不能是任意元素，且不支持“跨區(qū)域拖拽”（見下文第二張gif圖）

于是我就干脆自己寫了一個(gè)，我把它叫做：

React Draggable Tags

它很好用，最短只要幾行代碼；又很靈活，你可以進(jìn)行添加、修改、刪除、排序等操作，可以在一個(gè)標(biāo)簽里放任何東西，可以設(shè)置任何你想要的樣式（該組件本身并不包含樣式）。

而且，它不僅僅是標(biāo)簽組件，如果你做web項(xiàng)目時(shí)需要實(shí)現(xiàn)類似的拖拽功能，都可以用它！

我覺得我可以說它是目前最好的同類組件。（當(dāng)然有沒有bug不好說，還需要大家共同測(cè)試完善，有問題歡迎給我提issue）

文檔和demo地址見：https://github.com/YGYOOO/rea... （順便求star XD）

現(xiàn)已支持手機(jī)端

安裝

npm install react-draggable-tags --save

示例：
拖動(dòng)、添加、刪除等基本操作：

“跨區(qū)域“拖拽：

在一個(gè)標(biāo)簽里可以放任何東西，甚至。。。放一堆標(biāo)簽，以實(shí)現(xiàn)多層標(biāo)簽：

你幾乎可以對(duì)這些標(biāo)簽做任何你想做的事，比如對(duì)它們進(jìn)行排序：

云服務(wù)器 GPU云服務(wù)器最靈活的編程語言 html入門簡(jiǎn)單標(biāo)簽簡(jiǎn)單編寫一個(gè)html 您編一個(gè)簡(jiǎn)單點(diǎn)的

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95324.html

相關(guān)文章

Riot.js——一個(gè)小而美的JS框架

摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對(duì)來說，微型場(chǎng)景會(huì)更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分：響應(yīng)式視圖層用來創(chuàng)建用戶界面用來在各獨(dú)立模塊之間進(jìn)行通信的事件庫(kù) 用來管理URL和瀏覽器回...

nemo 2019-08-01 18:27 評(píng)論0 收藏0
Riot.js——一個(gè)小而美的JS框架

摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對(duì)來說，微型場(chǎng)景會(huì)更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分：響應(yīng)式視圖層用來創(chuàng)建用戶界面用來在各獨(dú)立模塊之間進(jìn)行通信的事件庫(kù) 用來管理URL和瀏覽器回...

tolerious 2019-08-22 13:59 評(píng)論0 收藏0
和其他庫(kù)（jquery,backbone）一起使用react

摘要：也就是說，只要一發(fā)生事件。和其他的庫(kù)共用由于方法的靈活性使得可以被嵌入到其他的應(yīng)用中。事實(shí)上，這就是在被使用的方式。在應(yīng)用中使用的層在組件中消費(fèi)中和最簡(jiǎn)單的方法是監(jiān)聽各種事件并手動(dòng)進(jìn)行強(qiáng)制更新。并且使用組件來渲染各個(gè)項(xiàng)。注：由于譯者水平有限，難免會(huì)出現(xiàn)錯(cuò)誤，希望大家能指出，謝謝。 react 可以被用在任何的web 應(yīng)用中。它可以被嵌入到其他的應(yīng)用中，要是你小心一點(diǎn)，其他的應(yīng)用也能被...

ckllj 2019-08-21 16:39 評(píng)論0 收藏0
在 React 項(xiàng)目中使用 React-intl 實(shí)現(xiàn)多語言支持

摘要：最近在項(xiàng)目中添加了語言國(guó)際化的功能。項(xiàng)目地址是雅虎的語言國(guó)際化開源項(xiàng)目的一部分，通過其提供的組件和可以與綁定。你當(dāng)然可以使用的方式引用，但是，這樣有前途么創(chuàng)建配置文件這里，我們將文件命名為和，代表中文和美式英語的配置包。 showImg(https://segmentfault.com/img/bVyv1N?w=900&h=506); 最近在項(xiàng)目中添加了語言國(guó)際化的功能。語言國(guó)際化，...

Mr_zhang 2019-08-19 18:38 評(píng)論0 收藏0
React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

摘要：最后抽離出來了一個(gè)類，可以幫助我們更好的做組件化。一個(gè)組件有自己的顯示形態(tài)上面的結(jié)構(gòu)和內(nèi)容行為，組件的顯示形態(tài)和行為可以由數(shù)據(jù)狀態(tài)和配置參數(shù)共同決定。接下來我們開始正式進(jìn)入主題，開始正式介紹。下一節(jié)鏈接直達(dá)小書基本環(huán)境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 評(píng)論0 收藏0