# draggable-comp-demo

**Repository Path**: yangs320/draggable-comp-demo

## Basic Information

- **Project Name**: draggable-comp-demo
- **Description**: 基于Vue的拖拽组件，实现拖拽配置界面
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/yangs320/draggable-comp-demo
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-20
- **Last Updated**: 2025-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# draggable-comp-demo

#### 介绍

基于 Vue 的拖拽组件，实现拖拽配置界面

#### 安装教程

1.  yarn install
2.  yarn run serve

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

#### 笔试题描述

**功能描述**

```
1、右侧为3*4（3行4列）布局的主模版，这个布局是预定义好的。
2、左侧是子内容模块，每种子模块支持对应的N*M比例展示（N<=4,M<=3）,可以拖拽到右侧的主模版上。
3、鼠标拖动内容块在右侧布局中移动，通过计算如果遇到可以放置的区域，底部框要有交互效果（见效果图），松手后自动填入到布局中。计算如果不能填入，无交互效果，松手回到左侧原位。
4、拖进布局中的元素，不会影响布局中原有内容块的位置，填入后会占用布局新的空间。布局中的内容块不能堆叠，重复占用布局位置。
5、已经在布局中的元素，支持再次拖动，调整到适合的位置。
```

**实现的效果动图**

```
见文件 1.gif
```

**使用的技术点**

```
原生HTML+JS+CSS 或者使用 Vue2/Vue3 、 Vue-Router 、Vuex/Pinia 进行开发实现
```