基于VUE实现相册图片拖拽

最新推荐文章于 2025-03-09 12:39:31 发布

weixin_34107955

最新推荐文章于 2025-03-09 12:39:31 发布

阅读量2.1k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/lemonfive/blog/2999786

版权

2019独角兽企业重金招聘Python工程师标准>>>

github地址：

http://hilongjw.github.io/vue-dragging/

安装

npm install zero-dnd

main.js引入

import VueDND from 'zero-dnd' // 页面拖拽

Vue.use(VueDND)

<!-- 实现相册拖拽功能 -->
<div class="color-list" v-dragevent="{ group: 'item', list: getDetail.goodsImages, dragged: handleDragged, dragend: handleDragend}">
   <div class="color-item" v-for="(item, index) in getDetail.goodsImages" v-dragging="{ item: item,            group: 'item' }" :key="index">
            <i class="el-icon-circle-close" @click="delImg(item, index)"></i>
            <img :src=" BASE_IMG + item" class="detailImg" alt="">
   </div>
</div>

methods: {
    handleDragged: function(data) {
      // console.log('餐品图拖拽 移动时触发', data)
    },
    handleDragend: function(data) {
      // console.log('餐品图拖拽 拖动结束后触发', data)
    }
}

转载于:https://my.oschina.net/lemonfive/blog/2999786