投稿

Awe-dnd–轻量级Vue拖动排序组件

Vedu • • 资源分享 • 阅读 2851

今天给大家分享一款超不错的Vue拖拽排列组件AweDnd。

轻量级 Vue 拖动排序组件Awe-dnd

awe-dnd 基于 vue2.x 拖放排序组件。让你轻松实现网页元素/图片随意拖动排序效果。

轻量级 Vue 拖动排序组件Awe-dnd

功能效果有些类似比较强大的一款vue拖拽组件vuedraggable。

https://github.com/SortableJS/Vue.Draggable
轻量级 Vue 拖动排序组件Awe-dnd

安装

$ npm i awe-dnd -S

引入组件

// 在main.js中引入
import VueDND from \'awe-dnd\';
Vue.use(VueDND);

快速使用

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

组件参数

轻量级 Vue 拖动排序组件Awe-dnd

大家可以在此基础上发挥自己的创造力开发一些比较有意思的拖拽功能。

轻量级 Vue 拖动排序组件Awe-dnd

最后附上项目地址链接。

# 示例地址
 http://hilongjw.github.io/vue-dragging/

# 仓库地址
https://github.com/hilongjw/vue-dragging

ok，今天就分享到这里。大家如果在项目中需要用到的话，可以去看下哈！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/13331.html

赞 (2)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-10-29 07:25
下一篇 2020-10-29 07:30

相关推荐

发表评论

登录后才能评论