使用mousedown/mouseup/mousemove事件实现拖拽双分栏中间的线,改变两边的宽度

很多拖拽改变宽度的需求,你可能首先想到的是使用html的拖放api,但是你会发现拖拽并且移动鼠标的过程中是没有事件触发的,这就导致你无法实时改变两边元素的宽度。

只有一个dragover,但是貌似无法满足需求

dragover ondragover (en-US) 当元素或选中的文本被拖到一个可释放目标上时触发(每 100 毫秒触发一次)。

所以我们可以监听 mousemove事件来实现我们的要求

mousedown: 开始拖拽

mousemove: 拖拽中

mouseup:结束拖拽

你可能感兴趣的:(前端)