在做一款uTools的插件,悬浮文本
窗口是没有标题栏的,所以需要找一个地方可以拖动移动位置
就开始了接下来的踩坑记录
项目结构
只是一个简单的容器元素,一个多行文本框
容器元素加一个内边距,然后这个内边距区域就是我理想的可拖动位置
<body>
<div id="container">
<textarea id="content" spellcheck="false"></textarea>
</div>
</body>
实现流程
webkit-app-region
首个版本,我采用CSS很简单便实现了
当时是用 Mac 开发测试的,一切运行良好
#container {
-webkit-app-region: drag;
padding: 10px;
cursor: move;
}
隔天到 Win 上看效果
发现拖动虽然正常,但是光标样式没有了
鼠标放在边框位置不会变成移动的光标
经查阅,设置了-webkit-app-region: drag;
的元素,不会在响应鼠标事件了(mac上测试的时候正常的)
so,需要继续改了
鼠标事件
没有简便办法了,就只好自己写个鼠标拖拽事件了
按下记录下鼠标相对于窗口的位置
鼠标移动后计算出窗口新的位置
窗口新