最近一个项目里面需要手写一下拖拽切换视频源的功能,本来是使用plain-draggable
库已经完成了开发,但是在测试中发现与项目中的@vant/touch-emulator
库产生了冲突。因为项目使用了vant ui,vant主要是用于触摸设备的前端页面开发,为了适配桌面端,所以需要引入@vant/touch-emulator
。
没办法只能舍小取大了,手写的拖拽的时候,只需写touch事件的拖拽即可,@vant/touch-emulator
可以自动转换为mouse
事件。实现的时候遇到下图的bug:
从下方拖出到右上方的时候莫名奇妙的尾迹竖线bug,dom中并没检查出任何多余元素。聪明的你可能会想到取消默认事件,但取消默认事件并不管用,查了半天资料,最后用一个css属性解决了
.draggable {
will-change: transform;
}
猜测产生bug的原因可能是拖拽时计算逻辑较为复杂,浏览器自动没有进行优化。will-change
是一个 CSS 属性,用于告诉浏览器你打算改变一个元素的哪些属性。这可以让浏览器在一个元素的某个属性真正改变之前就进行优化,从而提高页面的性能。