vue uses the vuedraggable plugin to implement drag and drop effects _vue.js_Script home
Script house Common server software
Quick navigation
Your location: Home page → Network programming → JavaScript → javascript class library → vue.js→ vue vuedraggable Drag

vue uses the vuedraggable plugin to achieve drag-and-drop effects

Updated: Apr 01, 2024 10:16:41 Author: Dried fish ~
This article mainly introduces vue using vuedraggable plug-in to achieve drag and drop effect, this article introduces the step by step installation of vuedraggable plug-in method and page introduction method, need friends can refer to

Technology: ant design vue1.7.8 UI framework, vue2.x version

Scenario: Need to implement div drag effect

Effect drawing:

Step 1: Install the vuedraggable plug-in

// Install npm i-S vuedraggable // or use yarn to install yarn add vuedraggable

Step 2: Introduce component script code blocks into the page

<script> // Step 1 ***. import draggable from 'vuedraggable' export default {components: {draggable, //***. Step 2}, data() {return {tagsList: [], treeClass: ", classList: [], checkedCategoryKeys: [], categoryTree: [], defaultProps: { children: 'subGroupList', title: 'groupName', key: 'groupCode', }, eventSelectedNode: null, isLoading: false,}}, created() {this.load_init()}, methods: {// Drag action ***. Step 3 Drag and drop the completion event onDraggableUpdate(e) {this.isLoading = true setTimeout(() => {this.isLoading = false // old position const oldIndex = E.olde index // New location const newIndex = e.nwindex const newSort = this.tagsList[e.nwindex].sort this.tagsList[e.newIndex].sort = this.tagsList[e.oldIndex].sort this.tagsList[e.oldIndex].sort = newSort console.log(this.tagsList) this.$message.success(' Sequence change successful! ')}, 1000)}, // load_init() {for (let index = 0; index < 98; Index+ +) {this.classList.push({value: 'val' + index, label: 'tree level _' + index,}) this.tagsList.push({value: 'val' + index, label: 'tree level _' + index, // Whether to edit isEditName: false, // sort: index, //loading isLoading: false, }) } }, }, } </script>

template block

<div class="bodyRight"> <div class="bodyRightTitle"> <div><span> Label pool </span></div> <div><a-button type="primary"> Import Excel</a-button></div> </div> <div class="bodyRightLabel"> <a-spin :spinning="isLoading"> <! Here is step 4 --> <draggable v-model="tagsList" class="bodyRightdraggable" @sort="onDraggableUpdate" animation="300" chosenClass="chosen" > <transition-group v-for="item in tagsList" :key="item.value"> <a-tag class="tabs" :key="item.value" @close="deleteTag(item)" style="margin-bottom: 5px" @dblclick="handleDblClick(item)" > <span class="a-select__tags-text tagname" v-if="! isEditName"> <CEllipsis :length="8" :tooltip="true"> {{item.label}} </CEllipsis> <div title=" Delete "><a-icon type="close" @click.stop="removeLabel(item)" /></div> </span> <a-input v-else :ref="'input_' + item.value" v-model="item.label" :maxLength="22" @pressEnter="sumbitLabel(item)" placeholder=" Please enter the label name "@blur="sumbitLabel(item)" ></a-input> </a-tag> </transition-group> </draggable> </a-spin> </div> </div>

style code block

.bodyRight { width: 65%; height: 100%; .bodyRightTitle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; line-height: 18px; } .bodyRightLabel { width: 100%; height: 90%; overflow-y: auto; border: 2px solid #d9d9d9; border-radius: 4px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; .bodyRightdraggable { display: flex; flex-wrap: wrap; padding: 10px; } .tabs { width: 125px; height: 35px; border: 1px dashed #ccc; border-radius: 25px; font-size: 16px; align-items: center; display: flex; cursor: pointer; .tagname { width: 100%; display: flex; justify-content: space-between; } i { display: none; } &:hover { i { font-size: 16px; color: red; display: inline-block; }}} //***. Step 5 Style.chosen {.tabs {border: 1px solid #1890ff; background-color: #fff ! important; color: #1890ff; cursor: move; } } } }

Note:

1. My vuedraggable version is 2.24.3 2. Website document address: https://www.itxst.com/vue-draggable/tutorial.html

This article about vue using vuedraggable plug-in to achieve drag and drop effect is introduced to this article, more related to vue vuedraggable drag and drop content please search the script home previous articles or continue to browse the following related articles hope that you will support the script home in the future!

Articles you may be interested in:

Related article

Latest comments