vue拖拽改变盒子大小,vue拖拽排序插件vuedraggable

　　主要介绍vue对页面div框拖动排序功能的实现，通过示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。

　　Vue实现了页面div框的拖拽排序功能。前言：目前市面上有很多实现拖拽排序功能的插件和方法。这一节就不多提了，只有一个：css3的transition-group方法。

　　效果图：

　　1.在DOM中使用：

　　transition-group class= container name= sort

　　div class= app-item v-for= app in custom apps :key= app . id :draggable= true

　　@dragstart=dragstart(app)

　　@dragenter=dragenter(app，$event)

　　@ dragend= getDragend(custom apps， customer ，$event)

　　差异

　　img class= icon _ a v-if= app . logo :src= app . logo

　　div class=省略号 {{app.name}}/div

　　/div

　　/div

　　/过渡-组

　　2.数据中定义的数据

　　从“@/api/enterpriseAPi”导入{ APi }

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　旧数据：[]，

　　新数据：[]，

　　自定义应用程序：[]，

　　dragStartId: ，

　　dragEndId:“”

　　}

　　}

　　}

　　/脚本

　　3.方法中使用的方法

　　dragstart(值){

　　this.oldData=value

　　this.dragStartId=value.id

　　},

　　dragenter(值){

　　this.newData=value

　　this.dragEndId=value.id

　　},

　　getDragend(listData，type) {

　　如果(this.oldData！==this.newData) {

　　let old index=list data . index of(this . old data)

　　设new index=list data . index of(this . new data)

　　let newItems=[.列表数据]

　　//删除上一个DOM节点

　　newItems.splice(oldIndex，1)

　　//在拖动结束的目标位置添加一个新的DOM节点。

　　newItems.splice(newIndex，0，this.oldData)

　　//每次拖放后，拖放过程后的数据会被赋给原来的数组，这样DOM视图会被更新，拖放动画会显示在页面上。

　　this.customApps=newItems

　　//每次拖放后调用接口时保存数据。

　　Api(this.dragStartId，this.dragEndId)。然后((res)={})

　　}

　　},

　　完成拖动动画样式：

　　style lang=scss 范围。排序-移动{

　　过渡：转换1s；

　　}

　　/风格

　　关于vue实现页面div框拖拽排序功能的这篇文章到此为止。更多相关vue div框拖拽排序内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。