已选 0 张便签
·
总票数 0
·
提示：在空白处拖拽可框选，点便签头部可拖动，双击便签正文可编辑。
截图预览 · 选中的便签
还没有选中任何便签。
这个案例练到了哪些课的知识点
网站开发 · JS 事件
mousedown / mousemove / mouseup 事件委托，区分点击、拖拽与框选三种交互。
网站开发 · DOM 操作
用数据驱动生成便签元素，按 id 维护引用，局部更新票数而非整页重绘。
网站开发 · SVG
连线层用 SVG 线段绘制，便签移动时实时重算坐标，练习坐标准换。
网站开发 · 动画
用 requestAnimationFrame 让同事光标平滑巡游，练习帧循环与插值。
网站开发 · 内容可编辑
便签正文用 contenteditable，双击即可改字，理解富交互组件的状态。
全栈开发 · 响应式思路
票数、选区、协作者在线状态都可抽象为「状态 → 视图」，对应 Vue 的数据驱动。