Vue 3 拖拽组件演示

🎯 Vue 3 拖拽组件完整演示

📖 使用说明

💡 基础拖拽: 直接拖动绿色方块

🔲 边界限制: 蓝色方块无法超出容器范围

✋ 拖拽手柄: 橙色方块只能通过顶部手柄拖动

🔒 禁用状态: 点击按钮切换灰色方块的拖拽状态

📍 网格吸附: 紫色方块自动吸附到50px网格

🎨 自定义样式: 红色方块展示自定义拖拽效果

🎯 基础拖拽

{{ positions.box1 }}

🔲 边界限制

{{ positions.box2 }}

✋ 拖我!

只能拖手柄

{{ positions.box3 }}

🔒 {{ isDisabled ? '已禁用' : '已启用' }}

{{ positions.box4 }}

📍 网格吸附

50px间距

{{ positions.box5 }}

🎨 自定义样式

{{ positions.box6 }}

📋 事件日志

{{ log }}

互动区域

登录后可以点赞此内容

参与互动

登录后可以点赞和评论此内容，与作者互动交流