Vue組件Draggable實(shí)現(xiàn)拖拽功能

更新時(shí)間：2021年09月15日 11:29:56 作者：葉落森

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

Draggable為基于Sortable.js的vue組件，用以實(shí)現(xiàn)拖拽功能。

具體說(shuō)明，請(qǐng)參考：學(xué)習(xí)鏈接

npm官方演示：

vuedraggable特性：

支持觸摸設(shè)備
支持拖拽和選擇文本
支持智能滾動(dòng)
支持不同列表之間的拖拽
不以jQuery為基礎(chǔ)
和視圖模型同步刷新
和vue2的國(guó)度動(dòng)畫(huà)兼容
支持撤銷(xiāo)操作
當(dāng)需要完全控制時(shí)，可以?huà)伋鏊凶兓?/li>
可以和現(xiàn)有的UI組件兼容

使用

安裝：

npm install vuedraggable

頁(yè)面引入：

import draggable from 'vuedraggable'

data定義數(shù)據(jù)進(jìn)行模擬：這是排序的案例，跟上面圖不一樣

<template>
 <div>
  <!-- 調(diào)用組件 -->
  <draggable element="ul" v-model="listdata">
   <li v-for="item in listdata">{{item.name}}</li>
  </draggable>
  <!-- 展示list數(shù)據(jù)效果 -->
  {{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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 修改網(wǎng)站圖標(biāo)的方法
這篇文章主要介紹了Vue 修改網(wǎng)站圖標(biāo)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)
本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue數(shù)組動(dòng)態(tài)刷新失敗問(wèn)題及解決
這篇文章主要介紹了vue數(shù)組動(dòng)態(tài)刷新失敗問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue 組件prop驗(yàn)證作用示例解析
這篇文章主要為大家介紹了vue組件prop驗(yàn)證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-06-06
html+vue.js 實(shí)現(xiàn)漂亮分頁(yè)功能可兼容IE
功能比較簡(jiǎn)單，在單一html中使用vue.js分頁(yè)展示數(shù)據(jù)，并未安裝腳手架，或使用相關(guān)UI框架，此時(shí)需要手寫(xiě)一個(gè)分頁(yè)器，不失為最合理最便捷的解決方案,需要的朋友可以參考下
2020-11-11
淺談vue3中effect與computed的親密關(guān)系
這篇文章主要介紹了淺談vue3中effect與computed的親密關(guān)系，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue3數(shù)組或?qū)ο筚x值不更新解決方法示例
這篇文章主要為大家介紹了vue3數(shù)組或?qū)ο筚x值不更新解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
對(duì)vue中v-on綁定自定事件的實(shí)例講解
今天小編就為大家分享一篇對(duì)vue中v-on綁定自定事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue3封裝echarts圖表數(shù)據(jù)無(wú)法渲染到頁(yè)面問(wèn)題
這篇文章主要介紹了vue3封裝echarts圖表數(shù)據(jù)無(wú)法渲染到頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09