vue如何实现拖动图片进行排序Vue.Draggable

 更新时间:2022年04月22日 17:04:46   作者:ji_ban  
这篇文章主要介绍了vue如何实现拖动图片进行排序Vue.Draggable,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

拖动图片进行排序Vue.Draggable

好久没接触vue的项目了,最近接到一个vue图片处理的小项目,有一项需求是要实现拖动图片就行排序。

接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件

下面是实现过程 

第一步:安装Vue.Draggable。两种方式npm和yarn   (我用的npm)

npm i -S vuedraggable
yarn add vuedraggable

第二步:全局安装完成之后在main.js中全局引用也行在需要的页面也用也没问题 (我因为就一个页面需要我就单页面引入的)

<script>
import draggable from "vuedraggable"
export default {
  components: {
    draggable
  }
}
</script>

第三步:安装和引用都完成了,现在开始使用了。

<template>
  <div class="col">
    <draggable v-model="data" filter=".forbid" animation="300" :move="onMove">
      <transition-group>
        <div v-for="(item, index) in data" :key="index">
          <div class="img-hover">
            <img :src="'http://xxxxx' + item.img"/>
          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

 注意:

/**
 *代码中的data为你的数据列表,onMove为你在拖动图片是触发的函数方法。
 *transition-group标签下一定是v-for循环,不然会报错。
**/

这样,一个简单的图片拖拽排序的简单demo就完成了。 

项目draggable拖拽移动图片顺序

第一步、导入

npm i vuedraggable

第二步、组件引入

import draggable from 'vuedraggable';

第三步、定义组件

components: { draggable},

第四步、页面中使用

<template>
  <div class="app-container">
      <div :class="canEdit? 'dargBtn-lock el-icon-unlock': 'dargBtn-lock el-icon-lock' " @click="removeEvent()">{{canEdit? '调整':'锁定'}}</div>
      <ul class="projset-content">
        <draggable
          :move="onMove"
          :list="imgList"
          handle=".dargBtn"
          :animation="200"
          filter=".undraggable"
        >
          <li v-for="(item, index) in imgList" :key="index" :class="canEdit ? 'draggable' : 'undraggable'">
            <div class="dargBtn">
              <svg-icon icon-class="drag" />
            </div>
            <img :src="item.path" alt="">
            <span>{{item.name}}</span>
          </li>
        </draggable>
      </ul>
  </div>
</template>
<script>
  import draggable from 'vuedraggable';
  export default {
    components: { draggable},
    data(){
      return{
        canEdit:true,
        imgList: [
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg',
            name: '1',
          },
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/26202931_14.jpg',
            name: '2',
          },
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/27788166_14.jpg',
            name: '3',
          }
        ]
      }
    },
    created() {
    },
    mounted(){},
    methods:{
      onMove(relatedContext, draggedContext){
        console.log(relatedContext.relatedContext.list);
      },
      removeEvent (item) {
        if(this.canEdit){
          this.canEdit = false;
        }else{
          this.canEdit = true;
        }
        console.log(this.canEdit);
      }
    }
  }
</script>
<style scoped lang="scss">
  .app-container{
    background: #ffffff;
    height: 100%;
    .dargBtn-lock{
      margin: 0px 50px;
      color: #2ea9df;
    }
    .projset-content{
      list-style-type: none;
      position: relative;
      li{
        display: inline-block;
        margin: 10px;
      }
      img{
        width: 141px;
        height: 100px;
      }
      span{
        justify-content: center;
        display: flex;
      }
      .dargBtn{
        position: absolute;
        line-height: 100px;
        text-align: center;
        width: 141px;
        height: 100px;
        display: none;
        color: white;
        background: rgba(101, 101, 101, 0.6);
      }
      .draggable{
        cursor: pointer;
        width: 141px;
        height: 100px;
      }
      .draggable:hover .dargBtn{
        display: block;
      }
    }
  }
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue如何实现组件的源码解析

    Vue如何实现组件的源码解析

    本篇文章主要介绍了Vue如何实现组件的源码解析,组件继承分为两大类,全局组件和局部组件,有兴趣的可以了解一下
    2017-06-06
  • 浅谈vue首次渲染全过程

    浅谈vue首次渲染全过程

    这篇文章主要介绍了浅谈vue首次渲染全过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • iview实现select tree树形下拉框的示例代码

    iview实现select tree树形下拉框的示例代码

    这篇文章主要介绍了iview实现select tree树形下拉框的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue-cli-service和webpack-dev-server的区别及说明

    vue-cli-service和webpack-dev-server的区别及说明

    这篇文章主要介绍了vue-cli-service和webpack-dev-server的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue父子组件通讯方式及实现方法

    Vue父子组件通讯方式及实现方法

    这篇文章主要介绍了Vue父子组件通讯方式及实现方法,文中通过代码示例介绍的非常详细,对我们的学习或工作有一定的帮助,感兴趣的同学可以参考阅读下
    2023-06-06
  • Vue3+TS+Vant3+Pinia(H5端)配置教程详解

    Vue3+TS+Vant3+Pinia(H5端)配置教程详解

    这篇文章主要介绍了Vue3+TS+Vant3+Pinia(H5端)配置教程详解,需要的朋友可以参考下
    2023-01-01
  • vue input标签通用指令校验的实现

    vue input标签通用指令校验的实现

    这篇文章主要介绍了vue input标签通用指令校验的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    本篇文章主要介绍了浅谈vuex之mutation和action的基本使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue首评加载速度及白屏时间优化详解

    Vue首评加载速度及白屏时间优化详解

    这篇文章主要介绍了vue项目优化首评加载速度,以及白屏时间过久的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • vscode下vue项目中eslint的使用方法

    vscode下vue项目中eslint的使用方法

    这篇文章主要给大家介绍了关于vscode下vue项目中eslint的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01

最新评论