vue Draggable實現(xiàn)拖動改變順序
更新時間：2022年04月07日 08:04:02 作者：懶怪
這篇文章主要為大家詳細介紹了vue Draggable實現(xiàn)拖動改變順序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue Draggable實現(xiàn)拖動改變順序的具體代碼，供大家參考，具體內容如下
1、npm install vuedraggable
2、import draggable from 'vuedraggable'
3、示例代碼
Test.vue
<template>
?<ul class="sort-ul">
? ? <div>45454</div>
? ? <draggable ?group="article" :value="sortArr" @input="handleListChange($event)">
? ? ? ?<li v-for="(item,index) in sortArr" :key="index">
? ? ? ? ?<h2>{{item.title}}</h2>
? ? ? ?</li>
? ? </draggable>
? </ul>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
? name: 'Test',
? props:{
? },
? data () {
? ? return {
? ? ? fileList: [],
? ? ? sortArr:[
? ? ? ? {title:"00"},
? ? ? ? {title:"01"},
? ? ? ? {title:"02"},
? ? ? ? {title:"03"},
? ? ? ? {title:"04"},
? ? ? ? {title:"05"},
? ? ? ? {title:"06"},
? ? ? ? {title:"07"},
? ? ? ? {title:"08"},
? ? ? ? {title:"09"},
? ? ? ],
? ? }
? },
? components: {
? ? Draggable, ?
? },
? methods: {
? ? ? // 更新位置
? ? ? handleListChange(event){
? ? ? ? console.log(event);
? ? ? ? this.sortArr = event;
? ? ? }
? },
? mounted () {
? ?
? }
}
</script>
<style>
? ul{
? ? padding: 0;
? ? width: 400px;
? }
? li{
? ? width: 100px;
? ? float:left;
? }
</style>main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
? ? el: '#app',
? ? components: { App },
? ? template: '<App/>'
})app.vue
<template>
? <div id="app">
? ? <Test />
? </div>
</template>
<script>
import Test from '@/components/Test.vue'
export default {
? name: 'App',
? components:{
? ? Test,
? },
? methods: {
? }
}
</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在進行vue開發(fā)的時候,我們不可避免會使用到導航菜單,element方便的為我們提供了導航菜單組件,下面這篇文章主要給大家介紹了關于el-menu實現(xiàn)橫向溢出截取的相關資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue實現(xiàn)行列轉換的一種方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了Vue的data為啥只能是函數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關于vue-router跳轉時打開新頁面的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue-router具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
有時候我們使用el-table的選擇框時,如果涉及修改、刪除時,可能一次只允許用戶選擇一條,這樣的話如果使用頂部的全選復選框就不合適了,這篇文章主要給大家介紹了關于el-table表頭全選框隱藏或禁用設置的相關資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue實現(xiàn)全局的toast組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue入門之數(shù)量加減運算操作,結合實例形式分析了vue.js基本數(shù)值運算相關操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue實現(xiàn)跨域的方法,結合實例形式分析了vue.js跨域的原理與相關實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)
這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue resource post請求時遇到的坑,需要的朋友可以參考下2017-10-10