vue:使用【3.0】:拖拽数据

本文介绍了如何在Vue项目中使用vuedraggable库实现可拖动的卡片列表,包括安装步骤、HTML模板、TS脚本以及CSS样式。
摘要由CSDN通过智能技术生成

1、参考链接:vue.draggable中文文档 - itxst.com

2、想要实现的效果图:红框内容可以拖拽

3、安装

yarn add vuedraggable@next
npm i -S vuedraggable@next

4、代码

<template>
    <draggable
      :list="columns"
      ghost-class="ghost"
      chosen-class="chosenClass"
      animation="300"
      class="chooseMain"
    >
      <template #item="{ element, index }">
        <div class="card mr-10px">
          <div class="box mb-10px">
            <div class="left mr-10px">
              <div class="border"></div>
              <div class="txt">{{ element.label }}</div>
            </div>
            <div class="right">
              <Icon
                color="#409eff"
                class="mr-5px"
                icon="ep:delete"
                @click="handleRemove(element, index)"
              />
            </div>
          </div>
        </div>
      </template>
    </draggable>
</template>

<script lang="ts" setup>
import draggable from 'vuedraggable'
const list = [
  {label: '1', value: '测试数据1'},
  {label: '2', value: '测试数据2'}
  {label: '3', value: '测试数据3'}
  {label: '4', value: '测试数据4'}
]
</script>

<style lang="scss" scoped>
  .chooseMain {
    display: flex;
    flex-wrap: wrap;
    .card {
      display: flex;
      flex-basis: 19%;
      box-sizing: border-box;
    }
    .box {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 5px;
      box-sizing: border-box;
      .left {
        display: flex;
        align-items: center;
        .border {
          height: 18px;
          width: 2px;
          border-left: 1px dotted #ccc;
          border-right: 1px dotted #ccc;
          display: flex;
          margin-right: 5px;
        }
        .txt {
          width: 130px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 28px;
        }
      }
      .right {
        width: 30px;
        display: flex;
        align-items: center;
      }
    }
  }
</style>

  • 12
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值