保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应阻力and Drop: Everything You Need to Know

Introduction about 反应阻力and Drop: 

反应拖放(dnd)UI已成为现代应用程序中最重要的部分之一。它有助于在不包含UX的情况下丰富UI。在很多情况下,我们可以在UI中使用拖放功能。下面列出了一些受欢迎的:

 

  • 使用网络浏览器中的拖放选项上传文件: 所有流行的网站(如gmail,google表单,WordPress等)都使用此功能,允许用户通过简单地拖放到所需位置来进行上传。
  • 对于在多个列表之间移动项目: Trello,Asana和许多其他生产力产品等网站都具有这些功能
  • 重新排列图像和其他资产: 许多视频编辑器使用此功能在不同部分之间重新定位其资产的资产。

反应的拖放库不同于那里的其他拖放实用程序。对于从未使用过它的人来说可能会令人生畏。如果您牢牢掌握它的设计概念,那么它将以某种方式变得有意义。 反应 dnd内部使用Redux,因此您发现它的某些概念与Redux和Flux类似。 

 

适用于拖放的流行React软件包:

反应具有三个不同的软件包,这些软件包大量用于创建拖放功能:

  • 美丽反应
  • 反应
  • 反应网格布局

 

上面列出的所有React软件包都同样重要,在React开发人员中很受欢迎,并且已经做出了积极的贡献。但是,他们每个人都有其优点和缺点,我们将在下面列出:

 

 反应漂亮的拖放:

 

  • 优点:
  • 如果必须使用一维布局,这是完美的选择。与列表一样,或者如果下拉列表需要像Trello网站那样进行垂直或水平移动,则布局和待办事项将与React DND配合使用。
  • 该API非常容易找出。在使用复杂的代码库时,任何开发人员都将拥有美好而愉快的体验。

 

  • 缺点:
  • 此程序包不适用于网格,因为它仅支持像网格一样的一维布局。因此,它不能在多个方向上移动。也就是说,它将无法同时计算x和y轴的位置。因此,您的内容将以随机顺序移位,直到您放下该元素为止。

反应网格布局:

 

  • 优点: 
  • 该软件包适用于网格,并且网格包含所有内容,因此基本上也适用于一维运动
  • 它适用于具有复杂网格的布局,例如仪表板的布局,可促进完全自定义和调整大小(例如:查找程序,用于数据可视化的产品等)
  • 大型应用程序的复杂性对此非常有效。

 

  • 缺点:
  • 但是,它并不是一个吸引人的API,因为我们必须自己进行大量计算,这使它非常难看。
  • 动态开发动态元素变得非常复杂。必须在UI中通过其组件API定义所有布局结构,

反应DnD:

  • 优点:
  • 该软件包适用于几乎所有情况,即一维布局或网格等。 
  • 它使用的API非常强大,因此可以进行拖放中的任何自定义。

 

  • 缺点:
  • 仅当您必须处理一些小示例时,API才简单。当您的应用程序需要一些可定制的东西时,如果我们必须完成事情,这将变得非常棘手和复杂。学习曲线比react-beautiful-dnd的曲线更陡峭,也更复杂。 
  • 为了支持Web和触摸设备,我们需要学习和实现很多技巧。

 

反应 DnD与那里存在的常见拖放库不同。如果有人以前从未使用过它,那可能真的很吓人。但是,一旦了解或掌握了各种概念,这就是React Drag and Drop设计的核心。之后,它将开始变得有意义。 反应拖放的某些概念非常类似于Flux和Redux架构。这并不奇怪,因为React拖放实际上在内部使用Redux。

后端: 

反应拖放基于HTML5拖放的API构建。这是非常合理的,因为它会获取所拖动的DOM节点的屏幕截图,然后将其用作预览以进行开箱即用。你也很有必要’因为有光标移动,所以不必对图形做任何事情。 HTML5拖放API是当前管理文件删除事件的唯一方法。但是HTML5的拖放API有一些明显的缺点。其中之一是它在艰难的屏幕上不受支持,并且与其他任何浏览器相比,它在Internet Explorer上的自定义可用性都受到限制。

为了克服此缺点,正在以一种可拖拽的方式在react拖放中实现HTML5拖放。这意味着您不必一定要使用它,并且可以根据困难事件或鼠标事件来编写不同的实现。

您也可以完全为其他内容编码。诸如此类的可插入实现称为后端React Drag and Drop。当前,此库仅包含HTML5,但将来可能会添加其他库。后端有助于抽象化浏览器差异和处理DOM的本机事件。后端可能扮演类似React的合成事件系统那样的角色,但是它对React或其合成事件系统没有任何依赖性。 

项目和类型: 

就像Redux或Flux一样,React Drag and Drop使用数据而不是视图作为获取真值的源。当在屏幕上拖动某些东西时,并不是说组件或DOM被拖动了。但是据说正在拖动某种类型的项目。所以您可能想知道什么是物品?好吧,我们可以说一个项目是一个简单的javaScript对象,它描述了要拖动的内容。这种将拖动的数据描述为简单对象的方法有助于我们使组件始终保持解耦状态,并且彼此之间互不了解’s existence. 

接下来是类型。类型是一种字符串或符号,可唯一标识应用程序中的整个项目类别。随着我们的应用的增长,类型非常有用,我们可能希望使它们变得更容易拖动,但我们不希望所有已经存在的放置目标突然开始对新项目做出反应。我们的应用程序中可能会有类型常量的枚举,这与我们对redux的动作类型的枚举非常相似。 

显示器:

监视器非常重要,因为它可以让我们根据拖放状态的变化来更新组件的道具。对于需要跟踪拖放状态的每个组件,我们可以定义一个收集功能,然后从所有监视器中检索它的相关位。 反应阻力and Drop会及时调用收集函数并将其返回值合并到我们组件的props中。 

连接器: 

后端处理DOM事件,但是组件使用React来描述DOM。问题产生了,后端如何知道必须监听哪个DOM节点。这是通过连接器来回答的。连接器使我们可以将其中一个预定义角色(包括拖动源,放置目标或拖动预览)分配给渲染功能中的DOM节点。 

拖动源和放置目标: 

到目前为止,我们所讨论的是与dOM配合使用的后端,由项和类型表示的数据以及包括监视器和连接器的收集功能,这些功能使我们能够确定应将React Drag和Drop注入到我们的道具中组件。每当我们要使组件或其一部分可拖动时,都需要将该组件包装在拖动源声明中。放置目标与拖动源非常相似,唯一明显的区别在于,单个放置目标可以立即注册各种物品类型,并且可以代替生产物品来处理物品的悬停和放置。 

结论: 

在谈论拖放功能时,我们刚刚看到了React的功能和能力。但是,我们始终可以使用React拖放包构建非常​​详尽的穷举功能。我们还讨论了行业中一些常用的React dnd库以及如何实现它。拖放功能绝对是任何网站都可以拥有的最重要的功能之一,它使我们的任务更加轻松且用户友好。  

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。