最近一个项目里面需要手写一下拖拽切换视频源的功能，本来是使用plain-draggable库已经完成了开发，但是在测试中发现与项目中的@vant/touch-emulator库产生了冲突。因为项目使用了vant ui，vant主要是用于触摸设备的前端页面开发，为了适配桌面端，所以需要引入@vant/touch-emulator。
没办法只能舍小取大了，手写的拖拽的时候，只需写touch事件的拖拽即可，@vant/touch-emulator可以自动转换为mouse事件。实现的时候遇到下图的bug:

6ba2a0f1-1f08-4adb-afdb-ebd2901c9d13.gif

从下方拖出到右上方的时候莫名奇妙的尾迹竖线bug，dom中并没检查出任何多余元素。聪明的你可能会想到取消默认事件，但取消默认事件并不管用，查了半天资料，最后用一个css属性解决了

  .draggable {
      will-change: transform;
  }

8f79bc1b-38a3-44a4-8a98-17b748a44ec9.gif

猜测产生bug的原因可能是拖拽时计算逻辑较为复杂，浏览器自动没有进行优化。will-change 是一个 CSS 属性，用于告诉浏览器你打算改变一个元素的哪些属性。这可以让浏览器在一个元素的某个属性真正改变之前就进行优化，从而提高页面的性能。