虽然之前有写过模拟浏览器拖拽行为的组件,但这种拖拽仅限于改变 DOM 元素的位置,只是 UI 层面的交互效果。最近在做的拖拽上传文件,拖拽时需要和服务端进行数据层面的交互,此时就需要用到浏览器原生的拖拽事件。
在高级浏览器中,DOM 元素都有一个 draggable 属性,用于标记其是否可以在浏览器中拖拽,常见的 a 、img 元素的 draggable 默认值为 true,浏览器默认其是可以拖拽的,而其他的布局元素如 div、p 这些默认并不支持拖拽,所以值是 false,如果想让其可以拖动,需要先将其设置成 true。
再来看看原生的拖拽相关的事件类型:
- drag : 元素被拖拽时由拖拽元素频繁触发的事件(每隔几百毫秒就会触发一次)
- dragstart : 拖拽时开始时由拖拽元素触发的事件
- dragend : 拖拽结束时触发由拖拽元素的事件
- dragover : 当拖拽元素进入放置区域时由放置元素频繁触发的事件(每隔几百毫秒就会触发一次)
- dragenter : 当拖拽元素进入放置区域时由放置元素触发的事件
- dragleave : 当拖拽元素离开放置区域时由放置元素触发的事件
- drop : 当拖拽元素在放置区域放置时由放置元素触发的事件