vuejs利用awe-dnd插件实现拖拽功能

前面介绍了很多款原生的拖拽功能，今天给大家介绍一款awe-dnd插件，它比前面一种写法都要简单，下面我们来学习一下！

1、安装依赖

npm install awe-dnd --save
//或
yarn add awe-and

2、全局引入main.js

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

3、代码实现

<template>
  <div>
    <div class="color-list">
      <div
        class="color-item"
        v-for="color in colors"
        v-dragging="{ item: color, list: colors, group: 'color' }"
        :key="color.text"
      >
        {{ color.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drag: false,
      colors: [
        {
          text: "Aquamarine",
        },
        {
          text: "Hotpink",
        },
        {
          text: "Gold",
        },
        {
          text: "Crimson",
        },
        {
          text: "Blueviolet",
        },
        {
          text: "Lightblue",
        },
        {
          text: "Cornflowerblue",
        },
        {
          text: "Skyblue",
        },
        {
          text: "Burlywood",
        },
      ],
    };
  },
};

</script>
<style scoped>
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
</style>

一款革命性的低代码开发平台，可拖拽组件——Noodl

bootstrap框架如何实现拖拽效果

javascript如何利用draggable实现一个拖拽效果

wordpress建站如何设置伪静态页面

vue页面如何利用插件实现列表滚动循环

标签： awe-dnd, 拖拽功能, 拖拽效果, 插件

上面是“vuejs利用awe-dnd插件实现拖拽功能”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2503.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！