【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
vue实现页面div盒子拖拽排序功能 vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="app.id" :draggable="true" @dragstart="dragstart(app)" 在Vue.js中实现页面div元素的拖拽排序功能可以极大地提升用户体验,特别是在构建可自定义布局的应用时。这里我们探讨的是一种基于CSS3 `transition-group` 的方法,它允许我们优雅地实现拖放动画和排序。 让我们看下DOM结构。在Vue组件中,我们需要一个`<transition-group>`来包裹所有可拖动的div元素。这个`<transition-group>`的`class`属性设置为"container",`name`属性设置为"sort",这样我们可以为每个元素添加特定的CSS类来进行过渡效果: ```html <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="app.id" :draggable="true" @dragstart="dragstart(app)" @dragenter="dragenter(app, $event)" @dragend="getDragend(customApps, 'customer', $event)"> <div> <img class="icon_a" v-if="app.logo" :src="app.logo"> <div class="ellipsis">{{app.name}}</div> </div> </div> </transition-group> ``` 每个div元素都有`v-for`指令,用于遍历`customApps`数组,并且具有拖放事件监听器。`@dragstart`、`@dragenter`和`@dragend`分别处理拖放的开始、进入目标和结束。 接下来,我们需要在`data`中定义相关变量来存储拖放过程中涉及的信息: ```javascript data() { return { oldData: [], newData: [], customApps: [], // 存储应用数据 dragStartId: '', // 拖动开始时应用的id dragEndId: '' // 拖动结束时目标应用的id } } ``` 在`methods`中,我们编写处理拖放操作的函数: - `dragstart(value)`:当拖动开始时,保存当前被拖动元素的值和id。 - `dragenter(value)`:当元素进入目标区域时,更新新的数据和目标id。 - `getDragend(listData, type)`:拖放结束后,根据旧数据和新数据的索引,重新排列`listData`数组。同时,将更新后的数组赋值给`customApps`,触发Vue的响应式更新。如果拖放改变了顺序,还需要调用API保存新的排序状态。 在`getDragend`中,我们通过`indexOf`找到旧数据和新数据在数组中的索引,然后使用`splice`方法进行删除和插入操作。调用一个名为`Api`的函数来持久化拖放后的新排序。 为了实现拖放动画,我们在CSS中定义了一个`.sort-move`类,它设置了一个1秒的`transition`,让元素在拖放后平滑移动到新位置: ```css .sort-move { transition: transform 1s; } ``` 总结来说,Vue.js中使用CSS3的`transition-group`实现div元素的拖拽排序,主要涉及以下步骤: 1. 使用`<transition-group>`组件包装可拖动的div元素,并绑定拖放事件。 2. 在`data`中存储拖放过程中的必要信息。 3. 编写`methods`中的拖放处理函数,包括开始、进入和结束时的操作。 4. 通过调整数据数组的顺序,触发Vue的响应式更新,实现元素的排序动画。 5. 用CSS定义拖放动画效果。 这种方法充分利用了Vue的响应式系统和CSS3的过渡效果,实现了一个直观且流畅的拖拽排序功能。
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/release/download_crawler_static/72144171/bg1.jpg)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 0
- 资源: 1万+
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)