vue拖拽组件vuedraggableAPIoptions实现盒子之间相互拖拽排序_vue拖拽盒子,vue盒子拖拽

draggable

175 浏览量更新于2023-03-03 评论收藏 85KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue拖拽组件拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序实现盒子之间相互拖拽排序

vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆（网上资源整理的文档）

效果图：

——————————————————————————–

首先需要安装vuedraggable依赖包：

npm install vuedraggable --save

因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下

npm install sortablejs --save

复制vue html代码到项目：

<draggable :list="list1" :options="{group:'article', disabled: disabled}"

@start="start22"

@end="end22"

class="dragArea11"

style="height: 100px">

<div class="list-complete-item-handle">{{element.name}}</div>

<div>

</div>

</draggable>

</div>

<draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"

@end="end"

class="dragArea">

<div v-for="element in list2" :key="element.id"

:class="{undraggable : element.flag}"

class="list-complete-item">

<div class="list-complete-item-handle2"> {{element.name}}</div>

</div>

</draggable>

</div>

</template>

下面是vue js代码（包含css样式）：

import draggable from 'vuedraggable'

export default {

name: 'DndList',

components: { draggable },

watch: {

data () {

return {

falgs: 'article',

disabled: false,

list1: [],

list2: [{id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3},

　　　　　　　　　{id: 4, name: 4}, {id: 5, name: 5}, {id: 6, name: 6},

　　　　　　　　　　{id: 7, name: 7}, {id: 8, name: 8}, {id: 9, name: 9}, {id: 10, name: 10}

　　　　　　　　] }

computed: {

methods: {

end (ev) {

if (ev.to.className === 'dragArea11') {

this.$set(this.list2[ev.oldIndex], 'flag', true)

}

start22 (event) {

this.falgs = '222222'

end22 (ev) {

this.falgs = 'article'

handleDel (index, id) {

this.list1.splice(index, 1)

let q = this.list2.find((value, index, arr) => {

return value.id === id

})

this.$set(q, 'flag', false)

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38637983

粉丝: 8
资源: 907

会员权益专享

vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

评论0

会员权益专享

最新资源

vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

评论0

vue-cloneya:一个Vue.js 2组件来克隆DOM元素

Vue.Draggable拖拽功能的配置使用方法

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

vue3+vuedraggable不同组件拖拽

AntDesign vue 结合 vuedraggable 实现拖拽排序功能

vue拖拽排序组建封装

vuedraggable示例_vue.draggable实现表格拖拽排序效果

vue拖拽实现app或小程序装修界面包括连接数据

vue拖动改变模板_vue实现div拖拽互换位置，vuediv拖拽互换

vue3 draggable 拖拽排序

vue 拖拽到目标区域

vue3 table拖拽排序

Draggable实现大屏拖拽Vue

vue 拖拽容器互换位置

vue往表格内拖拽实现

vuedraggable互相拖拽

vue九宫格draggable拖拽排序

vue vuedraggable增加拖拽表格的高度怎么写

vuedraggable结合el-table实现拖拽

vue elemet拖拽排序，代码

会员权益专享

最新资源