Vue3 + Moveable + Selecto 拖拽组件 Demo

一、项目概述

本demo旨在通过Vue3、Moveable和Selecto三个库的结合，实现一个基本的拖拽组件功能。通过Selecto实现元素的选择功能，通过Moveable控制选中元素的大小和位置。同时，封装了hooks以实现元素与数据之间的绑定，使得操作更加灵活和可维护。

二、技术栈

• Vue3：用于构建用户界面的渐进式JavaScript框架。
• Moveable：一个可以拖拽、缩放、旋转DOM元素的库。
• Selecto：一个用于选择多个DOM元素的库。

三、核心实现

1. Vue3 组件结构

   • 创建一个Vue 3组件，用于容纳可拖拽的元素。
   • 在组件中引入Moveable和Selecto库。

2. Selecto实现元素选择

   • 初始化Selecto实例，并绑定到Vue组件的DOM元素上。
   • 配置Selecto的选项，如选择框的样式、选择事件的回调等。
   • 在选择事件中，获取被选中的元素，并传递给Moveable进行进一步操作。

3. Moveable控制元素大小和位置

   • 初始化Moveable实例，并绑定到被Selecto选中的元素上。
   • 配置Moveable的选项，如拖拽、缩放、旋转等功能的开关。
   • 在Moveable的事件回调中，更新Vue组件的状态，以实现元素与数据之间的绑定。

4. 封装Hooks

   • 创建一个或多个hooks文件，用于封装与Moveable和Selecto相关的逻辑。
   • 在hooks中，定义函数来、处理事件回调，以及更新Vue组件的状态。
   • 在Vue组件中引入并使用这些hooks，以简化代码并提高可维护性。

四、使用说明

• 运行demo前，请确保已安装Vue 3、Moveable和Selecto库。
• 在Vue组件中引入并使用上述封装好的hooks。
• 根据需要配置Moveable和Selecto的选项，以满足具体需求。

五、示例代码

下面展示一个小示例。更详细的内容请参考Moveable和Selecto的官方文档。

tips:

• 根元素和待移动元素必须配置定位样式，且拖拽元素的位置需相对于根元素进行定位，否则将无法实现在指定区域内移动等功能。

• 在添加或删除画布元素（即画布内容发生变化时），本示例采用手动更新的方式来变更元素样式。这是因为我们在尝试使用双向绑定来更改元素样式时遇到了一些问题。

• 以下示例是基于官方文档并结合我个人的理解创建的，可能包含一些错误或不当之处，诚邀各位朋友交流讨论，提出宝贵意见。

 拖拽页面-index.vue