2020-09-29

最新推荐文章于 2024-09-24 11:41:48 发布

doran_M

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量100

点赞数

文章标签： vue.js

原文链接：https://blog.csdn.net/qq_41619796/article/details/105432486

版权

本文介绍了如何在Vue项目中利用awe-dnd插件实现拖拽排序的功能。首先通过npm安装awe-dnd，然后在main.js中引入并注册。接着在需要拖拽排序的li元素上使用v-dragging指令，传入列表数据、当前项和唯一标识。示例代码展示了如何在li元素中应用，并展示了拖拽排序时显示的眼睛和水滴图标，以及一个滑块组件。参考链接提供了详细教程。

摘要由CSDN通过智能技术生成

vue中实现一个拖拽功能

项目需要需要实现拖拽排序的效果，在这里使用的是vue的 awe-dnd 实现

效果：

安装插件

cnpm install awe-dnd --save 或者 npm install awe-dnd --save

在main.js中配置


//引入拖拽排序插件
import VueDND from 'awe-dnd'
 
Vue.use(VueDND)

在页面上使用

在你的li里面加上这句话：

v-dragging="{ list: knowGroup, item: item, group: 'knowTab' }"

解释：

{ list:你列表的数据, item: 是当前循环值 , group:你唯一的键，注意一个里面只有一个}

    <ul class="layers_">
      <li v-for="(item, index) in layers" :key="index" v-dragging="{ list: layers, item: item, group: 'index' }">
        <span class="span_title" @click="layer_eye(index)">
          <img src="@/assets/eye2.png" alt="" v-show="!item.is_eye" class="imgs_name">
          <img src="@/assets/eye1.png" alt="" v-show="item.is_eye" class="imgs_name">
          </span>
        <span class="span_title" @click="slider(index)">
          <img src="@/assets/water1.png" alt="" class="imgs_name" v-show="!item.show">
          <img src="@/assets/water.png" alt="" class="imgs_name" v-show="item.show">
        </span>
        {{ item.title }}
        <a-slider
          :default-value="1"
          @change="onChange"
          :min="0"
          :max="1"
          :step="0.01"
          class="slider"
          v-show="item.show"
        />
      </li>
    </ul>

参考：https://blog.csdn.net/qq_41619796/article/details/105432486