React + Drag API 实现拖拽

lxf2023-03-15 12:50:01

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

认识拖拽

React + Drag API 实现拖拽

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

被拖拽元素

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

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

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

可释放目标

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

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