可拖拽排序的vue组件

青旅半醒 2022-10-17 04:16 199阅读 0赞

安装

npm install awe-dnd --save

使用

在main.js中，通过Vue.use引入

import VueDND from 'awe-dnd'
    Vue.use(VueDND)

在vue文件中的使用

<template>
      <div class="color-list">
        <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
          :key="color.text"
        >{
       {color.text}}</div>
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            colors: [{
              text: "Aquamarine"
            }, {
              text: "Hotpink"
            }, {
              text: "Gold"
            }, {
              text: "Crimson"
            }, {
              text: "Blueviolet"
            }, {
              text: "Lightblue"
            }, {
              text: "Cornflowerblue"
            }, {
              text: "Skyblue"
            }, {
              text: "Burlywood"
            }]
          }
        },
        mounted () {
          this.$dragging.$on('dragged', ({ value }) => {
            console.log(value.item)
            console.log(value.list)
            console.log(value.otherData)
          })
          this.$dragging.$on('dragend', () => {
    
          })
        }
      }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221014/c590bef1dbd84b569a18c465594bae7a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3 实现拖拽排序

Vue3 实现拖拽排序我们使用的拖拽事件有： draggable：设置为可拖拽状态，true dragstart：开始拖拽 dragover：在拖拽

àì夳堔傛蜴生んèń/ 2023年09月27日 20:48/ 0 赞/ 6 阅读

相关实现一个可拖拽的vue指令

代码 drag.js import Vue from 'vue' Vue.directive('dragx',(el, binding, vnode)

朱雀/ 2023年02月13日 04:57/ 0 赞/ 18 阅读

相关 Vue：el-dialog可拖拽

我们使用`directives`绑定一个拖拽(drag)事件 directives: { drag: { // 指令的定义

偏执的太偏执、/ 2023年01月07日 13:26/ 0 赞/ 234 阅读

相关 vue 中表格拖拽排序

vue+iview 表格拖拽排序，代码如下 <Table border ref="selection"

妖狐艹你老母/ 2022年11月29日 13:12/ 0 赞/ 311 阅读

相关可拖拽排序的vue组件

安装 npm install awe-dnd --save 使用在main.js中，通过Vue.use引入 import VueDND from 'a

青旅半醒/ 2022年10月17日 04:16/ 0 赞/ 200 阅读

相关基于vue的拖拽排序，添加等，插件vuedraggable

第一步：安装插件vuedraggable npm install vuedraggable 第二步：在需要使用的组件中引入 import draggabl

悠悠/ 2022年10月03日 00:53/ 0 赞/ 362 阅读

相关 vue项目拖拽排序

推荐一个前端组件库：[轮子工厂][Link 1] 我用的是vue-slicksort拖拽组件，这是一个功能强大的可拖拽的vue.js组件。它可以自动滚动，锁定坐标系。支

àì夳堔傛蜴生んèń/ 2022年05月01日 12:12/ 0 赞/ 371 阅读

相关 elementUI Table组件实现拖拽效果

背景使用`Element UI Table`\+`Vue`实现表格的拖拽。在`GitHub`上搜索了下发现[Sortable][]这款插件挺不错的，`Star14000

矫情吗；*/ 2022年04月22日 06:50/ 0 赞/ 582 阅读

相关 flex组件拖拽

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] <? xml version ="1.0" encoding ="utf-8" ?>

绝地灬酷狼/ 2022年01月15日 13:23/ 0 赞/ 255 阅读

相关 flex组件拖拽

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] <? xml version ="1.0" encoding ="utf-8" ?>

た入场券/ 2022年01月15日 13:21/ 0 赞/ 268 阅读