React结合Drag API实现拖拽示例详解

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

React结合Drag API实现拖拽示例详解

samwangdd   2023-03-23 我要评论

认识拖拽

鼠标拖拽是一个常见的交互场景,在这个熟悉的过程将会发生哪些事件?

拖拽事件指用户通过鼠标(或其他指针设备)将元素移到一个新的位置上。拖拽过程涉及两个对象:被拖拽元素(上图中 A )和可释放目标(上图中 B )

被拖拽元素

默认情况下,图片、链接和文本是可拖动的。HTML5 在所有 HTML 元素上规定了一个 draggable 属性, 表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true,而其他所有元素此属性的默认值为 false。

某个元素被拖动时,会依次触发以下事件:

  • ondragstart:拖动开始,当鼠标按下并且开始移动鼠标时,触发此事件;整个周期只触发一次;
  • ondrag:只要元素仍被拖拽,就会持续触发此事件;
  • ondragend:拖拽结束,当鼠标松开后,会触发此事件;整个周期只触发一次。

可释放目标

当把拖拽元素移动到一个有效的放置目标时,目标对象会触发以下事件:

  • ondragenter:只要一把拖拽元素移动到目标时,就会触发此事件;
  • ondragover:拖拽元素在目标中拖动时,会持续触发此事件;
  • ondragleaveondrop:拖拽元素离开目标时(没有在目标上放下),会触发ondragleave;当拖拽元素在目标放下(松开鼠标),则触发ondrop事件。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们