Skip to content

feat: add drag-to-move support for widget, toggle button and chat window#65

Merged
LIlGG merged 3 commits into
mainfrom
feature/drag-position
May 19, 2026
Merged

feat: add drag-to-move support for widget, toggle button and chat window#65
LIlGG merged 3 commits into
mainfrom
feature/drag-position

Conversation

@LIlGG
Copy link
Copy Markdown
Owner

@LIlGG LIlGG commented May 19, 2026

What type of PR is this?

/kind feature

What this PR does / why we need it:

为 Live2D 组件添加拖拽移动功能,支持用户通过鼠标拖拽调整以下元素的位置:

  1. Live2D 看板娘主部件(widget)
  2. 聊天窗口(chat window)
  3. 切换按钮(toggle button)

主要实现:

  • 提取可复用的 DraggableMixin,支持多个组件共享拖拽逻辑
  • 拖拽位置信息保存至 localStorage,刷新页面后位置保持不变
  • 拖拽过程中跳过交互元素(输入框、按钮、canvas、工具栏),避免影响正常操作
  • 拖拽时提供视觉反馈(光标变化、遮罩层)
  • 位置限制在视口范围内,防止元素拖出可视区域

How to test it?

  1. 在前端页面中,尝试拖拽 Live2D 看板娘、切换按钮和聊天窗口
  2. 验证拖拽位置在页面刷新后仍然保持
  3. 验证点击输入框、按钮等交互元素时不会触发拖拽
  4. 验证拖拽时元素不会超出浏览器视口边界

Which issue(s) this PR fixes:

Fixes #47

Does this PR introduce a user-facing change?

支持通过鼠标拖拽调整 Live2D 看板娘、切换按钮和聊天窗口的位置

- Add DraggableMixin for reusable drag functionality
- Position info saved to localStorage (client-side)
- Support dragging: widget, toggle button, chat window
- Skip interactive elements (input, button, canvas, tools)
- Add visual feedback during drag (cursor, overlay)
- Clamp position within viewport bounds

Closes #47
@LIlGG LIlGG force-pushed the feature/drag-position branch from 959bf08 to 50895a7 Compare May 19, 2026 04:24
@LIlGG LIlGG merged commit cded572 into main May 19, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

建议加入移动功能

1 participant