在上一节中，我们已经创建了悬浮球的基本框架，并实现了悬浮球的显示和隐藏。在这一节中，我们将继续实现悬浮球的拖拽功能。
首先，我们需要在floatingBall.go中添加一个新的方法来处理拖拽事件：
// floatingBall.go
package main
import (
"github.com/wailsapp/wails"
)
type FloatingBall struct {
runtime *wails.Runtime
show bool
x int
y int
}
// ... 省略其他代码 ...
// Drag 处理悬浮球的拖拽逻辑
func (b *FloatingBall) Drag(data string) {
// 将data转换为DragInfo结构体
var info DragInfo
err := json.Unmarshal([]byte(data), &info)
if err != nil {
b.runtime.LogError("解析拖拽数据失败: ", err)
return
}
// 更新悬浮球位置
b.x = info.X
b.y = info.Y
b.runtime.Events.Emit("updatePosition", map[string]interface{}{
"x": b.x,
"y": b.y,
})
}
// ... 省略其他代码 ...
然后，我们需要在前端代码中监听拖拽事件，并在拖拽结束后更新悬浮球位置：
<!-- renderer/main/main.html -->
<!DOCTYPE html>
<html>
<head>
<!-- ... 省略其他代码 ... -->
</head>
<body>
<!-- ... 省略其他代码 ... -->
<script>
// ... 省略其他代码 ...
window.wails.Events.on('updatePosition', (payload) => {
ball.style.left = payload.x + 'px';
ball.style.top = payload.y + 'px';
});
ball.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - parseInt(ball.style.left);
offsetY = e.clientY - parseInt(ball.style.top);
});
window.addEventListener('mousemove', (e) => {
if (isDragging) {
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
ball.style.left = x + 'px';
ball.style.top = y + 'px';
window.wails.Events.emit('drag', JSON.stringify({ x, y }));
}
});
window.addEventListener('mouseup', () => {
isDragging = false;
});
// ... 省略其他代码 ...
</script>
</body>
</html>
在上面的代码中，我们添加了updatePosition事件的监听，用于更新悬浮球的位置。我们还为悬浮球添加了mousedown、mousemove和mouseup事件监听器，以实现拖拽功能。当用户拖动悬浮球时，我们发送drag事件给后端，并在前端更新悬浮球的位置。
这样，悬浮球的拖拽功能就完成了。你可以运行你的应用，并试着拖动悬浮球看看效果。