vue如何實(shí)現(xiàn)拖動(dòng)圖片進(jìn)行排序Vue.Draggable
更新時(shí)間：2022年04月22日 17:04:46 作者：ji_ban
這篇文章主要介紹了vue如何實(shí)現(xiàn)拖動(dòng)圖片進(jìn)行排序Vue.Draggable，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
拖動(dòng)圖片進(jìn)行排序Vue.Draggable
好久沒接觸vue的項(xiàng)目了，最近接到一個(gè)vue圖片處理的小項(xiàng)目，有一項(xiàng)需求是要實(shí)現(xiàn)拖動(dòng)圖片就行排序。
接到這個(gè)需求之后立馬想到了Vue.Draggable這款基于Sortable.js實(shí)現(xiàn)的vue拖拽插件
下面是實(shí)現(xiàn)過程
第一步：安裝Vue.Draggable。兩種方式npm和yarn （我用的npm）
npm i -S vuedraggable yarn add vuedraggable
第二步：全局安裝完成之后在main.js中全局引用也行在需要的頁面也用也沒問題 （我因?yàn)榫鸵粋€(gè)頁面需要我就單頁面引入的）
<script>
import draggable from "vuedraggable"
export default {
? components: {
? ? draggable
? }
}
</script>第三步：安裝和引用都完成了，現(xiàn)在開始使用了。
<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為你的數(shù)據(jù)列表，onMove為你在拖動(dòng)圖片是觸發(fā)的函數(shù)方法。 ?*transition-group標(biāo)簽下一定是v-for循環(huán)，不然會(huì)報(bào)錯(cuò)。 **/
這樣，一個(gè)簡(jiǎn)單的圖片拖拽排序的簡(jiǎn)單demo就完成了。
項(xiàng)目draggable拖拽移動(dòng)圖片順序
第一步、導(dǎo)入
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? '調(diào)整':'鎖定'}}</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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue如何實(shí)現(xiàn)組件的源碼解析，組件繼承分為兩大類，全局組件和局部組件，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了淺談vue首次渲染全過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼
這篇文章主要介紹了iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue-cli-service和webpack-dev-server的區(qū)別及說明
這篇文章主要介紹了vue-cli-service和webpack-dev-server的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue父子組件通訊方式及實(shí)現(xiàn)方法，文中通過代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的幫助，感興趣的同學(xué)可以參考閱讀下2023-06-06
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Vue首評(píng)加載速度及白屏?xí)r間優(yōu)化詳解
這篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化首評(píng)加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vscode下vue項(xiàng)目中eslint的使用方法
這篇文章主要給大家介紹了關(guān)于vscode下vue項(xiàng)目中eslint的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01