怎么在Vue中使用Draggable實現一個拖拽功能

本篇文章給大家分享的是有關怎么在Vue中使用Draggable實現一個拖拽功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

vuedraggable特性：

• 支持觸摸設備

• 支持拖拽和選擇文本

• 支持智能滾動

• 支持不同列表之間的拖拽

• 不以jQuery為基礎

• 和視圖模型同步刷新

• 和vue2的國度動畫兼容

• 支持撤銷操作

• 當需要完全控制時，可以拋出所有變化

• 可以和現有的UI組件兼容
  

使用

安裝：

npm install vuedraggable

頁面引入：

import draggable from 'vuedraggable'

data定義數據進行模擬：這是排序的案例，跟上面圖不一樣

<template>
 <div>
  <!-- 調用組件 -->
  <draggable element="ul" v-model="listdata">
   <li v-for="item in listdata">{{item.name}}</li>
  </draggable>
  <!-- 展示list數據效果 -->
  {{listdata}}
 </div>
</template>
 
<script>
import draggable from 'vuedraggable'
export default {
 name: 'draggabletest',
 components: { 
  draggable,
 },
 data () {
  return {
   listdata:[
    {
     id: 1,
     name: '葉落森1'
    },
    {
     id: 2,
     name: '葉落森2'
    },
    {
     id: 3,
     name: '葉落森3'
    },
    {
     id: 4,
     name: '葉落森4'
    },
    {
     id: 5,
     name: '葉落森5'
    }
   ]
  }
 },
}
</script>

以上就是怎么在Vue中使用Draggable實現一個拖拽功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。