React怎么结合Drag API实现拖拽效果


本篇内容主要讲解“React怎么结合DragAPI实现拖拽效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React怎么结合DragAPI实现拖拽效果”吧!鼠标拖拽是一个常见的交互场景,在这个熟悉的过程将会发生哪些事件?拖拽事件指用户通过鼠标(或其他指针设备)将元素移到一个新的位置上。拖拽过程涉及两个对象:被拖拽元素(上图中 A )和可释放目标(上图中 B )默认情况下,图片、链接和文本是可拖动的。HTML5 在所有 HTML 元素上规定了一个 draggable 属性, 表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true,而其他所有元素此属性的默认值为 false。某个元素被拖动时,会依次触发以下事件:ondragstart:拖动开始,当鼠标按下并且开始移动鼠标时,触发此事件;整个周期只触发一次;ondrag:只要元素仍被拖拽,就会持续触发此事件;ondragend:拖拽结束,当鼠标松开后,会触发此事件;整个周期只触发一次。当把拖拽元素移动到一个有效的放置目标时,目标对象会触发以下事件:ondragenter:只要一把拖拽元素移动到目标时,就会触发此事件;ondragover:拖拽元素在目标中拖动时,会持续触发此事件;ondragleaveondrop:拖拽元素离开目标时(没有在目标上放下),会触发ondragleave;当拖拽元素在目标放下(松开鼠标),则触发ondrop事件。目标元素默认是不能够被拖放的,即不会触发ondrop 事件,可以通过在目标元素的ondragover事件中取消默认事件来解决此问题。除非数据受影响,否则简单的拖放并没有实际意义。为实现拖动操作中的数据传输,event 对象上暴露了 dataTransfer 对象,用于从被拖动元素向放置目标传递字符串数据。我们使用它来通知画布,当前需要渲染的组件是什么。dataTransfer 对象主要有两个方法:getData() 和 setData(),分别用来获取和存储值。setData()的第一个参数以及 getDa免费云主机域名ta()的唯一参数是一个字符串,表示要设置的数据类型:”text”或”URL”????虽然这两种数据类型是 IE 最初引入的,但 HTML5 已经将其扩展为允许任何 MIME 类型。为向后 兼容,HTML5 还会继续支持”text”和”URL”,但它们会分别被映射到”text/plain”和”text/uri-list”需要注意的是:存储在 dataTransfer 对象中的数据只能在放置事件中读取。如果没有在 ondrop 事件中取得这些数据,dataTransfer 对象就会被销毁,数据也会丢失。我在项目中使用 React 来实现,并且考虑到跨组件通信,我使用了 dva 来管理数据流。HTML5 支持的 data-x 属性,我们可以将当前组件的类型 Rectangle 赋值给它,这样处理和画布组件通信方便一些在上文中讲到,dataTransfer 的数据必须在 handleDrop 方法中获取。实际的用来保存画布中的所有组件的数据:拖动主要依赖组件的初始位置,鼠标开始位置、结束位置。根据后两组得到鼠标移动的距离,和初始位置相加后,得到最终位置。最后,就是组件和数据结构的设计,RenderComponent 是一个自定义的组件,会根据传入的 type 属性渲染对应的组件。组件的数据结构设计如下:到此,相信大家对“React怎么结合DragAPI实现拖拽效果”有了更深的了解,不妨来实际操作一番吧!这里是百云主机网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: import as在es6中怎么用

本篇内容主要讲解“import as在es6中怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“import as在es6中怎么用”吧! 在es6中,import as用于将若干export导出的内容组合成一个对…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 05/18 10:45
Next 05/18 10:55

相关推荐