vue.draggable拖拽组件封装(Vue3)

文档

官方网站

https://github.com/SortableJS/vue.draggable.next

中文文档

vue3: https://www.itxst.com/vue-draggable-next/tutorial.html
vue2: https://www.itxst.com/vue-draggable/tutorial.html

安装

# NPM
$ npm i -S vuedraggable@next

# Yarn
$ yarn add vuedraggable@next

# pnpm
$ pnpm i -S vuedraggable@next

导入

import Draggable from "vuedraggable";

组件封装实例

Draggable组件封装(vue3版)

<script lang="ts" setup>
import { ref, watch } from "vue";
import Draggable from "vuedraggable";

const props = defineProps({
  dragList: {
    type: Array,
    default() {
      return [];
    }
  },
  icons: {
    type: String,
    default: ""
  },
  hideIcons: {
    type: Boolean,
    default: true
  }
});
const dragList = ref([]) as any;
const drag = ref(false);

const emit = defineEmits(["dragList"]);
function updateDrag() {
  emit("dragList", dragList.value);
}
watch(
  () => props.dragList,
  val => {
    dragList.value = val;
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div>
    <Draggable
      :list="dragList"
      @update="updateDrag"
      @start="drag = true"
      @end="drag = false"
      v-bind="{ animation: 400 }"
      itemKey="index"
    >
      <template #item="{ element, index }">
        <div>
          <el-card shadow="hover">
            <div class="flex items-start">
              <!-- 图标 -- >
              <img :src="props.icons" v-show="props.hideIcons"/>
              <slot :item="element" :index="index" />
            </div>
          </el-card>
        </div>
      </template>
    </Draggable>
  </div>
</template>

引用组件

<script setup lang="ts">
    import Draggable from './Draggable.vue'

    const list =[{
        num:1
    },{
        num:2
    },{
        num:3
    },{
        num:4
    }]

    function deleteItem(index){
        list.value.splice(index,1)
    }
</script>

<template>
    <div class="wrapper">
        <Draggable :dragList="list">
            <template #default="element">
                <div v-for="(item, idx) in element" :key="idx">
                    <p>{{item.num}}</p>
                    <el-button @click="deleteItem(element.index)">删除</el-button>
                </div>
            </template>
        </Draggable>
    </div>
</template>
  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue-draggable-plus是基于Vue.js的可组件库。它是基于vuedraggable的扩展,提供了更多的功能和选项来满足不同的需求。使用Vue-draggable-plus可以方便地实现功能,并且可以对属性重复添加问题进行处理。 安装Vue-draggable-plus,可以使用以下命令: ``` yarn add vue-draggable-plus npm install vue-draggable-plus --save ``` 在处理属性重复添加问题时,可以通过监听事件来判断右侧属性列表中是否已存在相同属性。在事件中,可以通过事件参数获取相关的数据信息。例如,通过`e.draggedContext.element`可以获取动元素绑定的数据对象,通过`e.relatedContext.list`可以获取目标列表的数据。可以使用这些数据进行简单的对比,如果已存在相同属性,则返回false,终止动动作。 Vue-draggable-plus提供了丰富的事件和选项,可以根据具体的需求进行定制和配置。通过合理地使用这些功能和选项,可以实现属性重复添加问题的处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [关于vue使用vue-draggable实现图片效果(项目中使用简单描述)](https://blog.csdn.net/m0_60602811/article/details/127106131)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vuedraggable实战:结合具体应用场景实现列表内排序、列表间移动、复制,介绍、安装、使用、坑点及解决...](https://blog.csdn.net/seawaving/article/details/128083596)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值