vuedraggable實(shí)現(xiàn)簡單拖拽功能

更新時(shí)間：2022年04月06日 08:39:21 作者：weixin_38673922

這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vuedraggable實(shí)現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

一、下載依賴

npm i -S vuedraggable

二、代碼塊

<template>
?? ?<div>
?? ?<a-checkbox-group @change="onChange">
?? ??? ?<draggable ?group="people"
?? ??? ??? ?class="list-group"
?? ??? ??? ?ghost-class="ghost"
?? ??? ??? ?:move="checkMove">
?? ??? ??? ?<!--?
?? ??? ??? ?:list="myArray"
?? ??? ??? ?:disabled="!enabled"
?? ??? ??? ?@start="drag=true"
?? ??? ??? ?@end="drag=false"
?? ??? ??? ??? ? -->
?? ??? ??? ??? ?<div class="list-group-item" ?v-for="(item,index) in myArray" :key="item.index">
?? ??? ??? ??? ?<a-checkbox :value="item.value"> {{item.name}} </a-checkbox>
?? ??? ??? ??? ?</div>
?? ??? ?</draggable>?

?? ?</a-checkbox-group>
?? ??? ?</div>
?? ?</template>
?? ?
?? ?<script>
?? ?//引入vuedraggable
?? ?import draggable from 'vuedraggable'
?? ?export default {
?? ? ?components : { draggable},
?? ? ? ?data () {
?? ? ? ? ?return {
?? ? ? ? ? ?enabled: true,
?? ? ? ? ? ?myArray : [{
?? ??? ??? ??? ?name:'臨汾',
?? ??? ??? ??? ?value:1
?? ??? ??? ?},{
?? ??? ??? ??? ?name:'運(yùn)城',
?? ??? ??? ??? ?value:2
?? ??? ??? ?},{
?? ??? ??? ??? ?name:'長治',
?? ??? ??? ??? ?value:3
?? ??? ??? ?},{
?? ??? ??? ??? ?name:'晉城',
?? ??? ??? ??? ?value:4
?? ??? ??? ?}],
?? ? ? ? ?}
?? ? ? ?},
?? ? ?methods: {
?? ??? ?onChange(checkedValues) {
?? ??? ??? ?console.log(checkedValues); //復(fù)選框選中的值
?? ??? ?},
?? ? ? ?checkMove(){
?? ? ? ? ??? ?console.log(this.myArray) //實(shí)時(shí)myarray數(shù)據(jù)，每拖動一次就會得到最新的排列數(shù)據(jù)
?? ? ? ?},
?? ? ?}
?? ?}
?? ?</script>
?? ??
?? ?<style scoped>
?? ?.flip-list-move {
?? ? ?-webkit-transition: -webkit-transform 0.5s;
?? ? ?transition: -webkit-transform 0.5s;
?? ? ?transition: transform 0.5s;
?? ? ?transition: transform 0.5s, -webkit-transform 0.5s;
?? ?}
?? ?.no-move {
?? ? ?-webkit-transition: -webkit-transform 0s;
?? ? ?transition: -webkit-transform 0s;
?? ? ?transition: transform 0s;
?? ? ?transition: transform 0s, -webkit-transform 0s;
?? ?}
?? ?.ghost {
?? ? ?opacity: 0.5;
?? ? ?background: #c8ebfb;
?? ?}
?? ?.list-group {
?? ? ?min-height: 20px;
?? ?}
?? ?.list-group-item {
?? ? ?cursor: move;
?? ?}
?? ?.list-group-item i {
?? ? ?cursor: pointer;
?? ?}
?? ??
?? ?.list-group-item:first-child {
?? ? ?border-top-left-radius: 4px;
?? ? ?border-top-right-radius: 4px;
?? ?}
?? ?.list-group-item {
?? ? ?position: relative;
?? ? ?display: block;
?? ? ?padding: 10px 105px;
?? ? ?margin-bottom: -1px;
?? ? ?background-color: #fff;
?? ? ?border: 1px solid #ddd;
?? ?}
?? ?.list-group-item:last-child {
?? ? ?margin-bottom: 0;
?? ? ?border-bottom-right-radius: 4px;
?? ? ?border-bottom-left-radius: 4px;
?? ?}
</style>