摘要：最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于的组件能很好的满足需求。
最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。
较为知名的是react-dnd，然而它似乎只支持把一个元素移到固定的位置，我需要的是一个标签可以移动到任意位置的两个标签之间（每个标签长度不固定，所以没有固定的位置）
满足上述需求的是react-tags，但该组件很不灵活，想要修改样式、对标签进行一些额外操作很不方便，标签内部必须是文字而不能是任意元素，且不支持“跨区域拖拽”（见下文第二张gif图）
于是我就干脆自己写了一个，我把它叫做：
React Draggable Tags它很好用，最短只要几行代码；又很灵活，你可以进行添加、修改、删除、排序等操作，可以在一个标签里放任何东西，可以设置任何你想要的样式（该组件本身并不包含样式）。
而且，它不仅仅是标签组件，如果你做web项目时需要实现类似的拖拽功能，都可以用它！
我觉得我可以说它是目前最好的同类组件。（当然有没有bug不好说，还需要大家共同测试完善，有问题欢迎给我提issue）
文档和demo地址见：https://github.com/YGYOOO/rea... （顺便求star XD）
现已支持手机端
安装
npm install react-draggable-tags --save
示例：
拖动、添加、删除等基本操作：
“跨区域“拖拽：
在一个标签里可以放任何东西，甚至。。。放一堆标签，以实现多层标签：
你几乎可以对这些标签做任何你想做的事，比如对它们进行排序：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95324.html
摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。 Riot.js是什么？ Riot 拥有创建现代客户端应用的所有必需的成分： 响应式 视图层用来创建用户界面 用来在各独立模块之间进行通信的事件库 用来管理URL和浏览器回...
摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。 Riot.js是什么？ Riot 拥有创建现代客户端应用的所有必需的成分： 响应式 视图层用来创建用户界面 用来在各独立模块之间进行通信的事件库 用来管理URL和浏览器回...
摘要：也就是说，只要一发生事件。和其他的库共用由于方法的灵活性使得可以被嵌入到其他的应用中。事实上，这就是在被使用的方式。在应用中使用的层在组件中消费中和最简单的方法是监听各种事件并手动进行强制更新。并且使用组件来渲染各个项。 注：由于译者水平有限，难免会出现错误，希望大家能指出，谢谢。 react 可以被用在任何的web 应用中。它可以被嵌入到其他的应用中，要是你小心一点，其他的应用也能被...
摘要：最近在项目中添加了语言国际化的功能。项目地址是雅虎的语言国际化开源项目的一部分，通过其提供的组件和可以与绑定。你当然可以使用的方式引用，但是，这样有前途么创建配置文件这里，我们将文件命名为和，代表中文和美式英语的配置包。 showImg(https://segmentfault.com/img/bVyv1N?w=900&h=506); 最近在项目中添加了语言国际化的功能。 语言国际化，...
摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类 本文作者：胡子大哈本文原文：http://huziketang.com/books...
阅读 609·2023-04-26 02:03
阅读 959·2021-11-23 09:51
阅读 1054·2021-10-14 09:42
阅读 1672·2021-09-13 10:23
阅读 880·2021-08-27 13:12
阅读 803·2019-08-30 11:21
阅读 967·2019-08-30 11:14
阅读 982·2019-08-30 11:09
