Vue組件Draggable實(shí)現(xiàn)拖拽功能
更新時間：2021年09月15日 11:29:56 作者：葉落森
這篇文章主要為大家詳細(xì)介紹了Vue組件Draggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Draggable為基于Sortable.js的vue組件，用以實(shí)現(xiàn)拖拽功能。
具體說明，請參考：學(xué)習(xí)鏈接
npm官方演示：
vuedraggable特性：
- 支持觸摸設(shè)備
- 支持拖拽和選擇文本
- 支持智能滾動
- 支持不同列表之間的拖拽
- 不以jQuery為基礎(chǔ)
- 和視圖模型同步刷新
- 和vue2的國度動畫兼容
- 支持撤銷操作
- 當(dāng)需要完全控制時，可以拋出所有變化
- 可以和現(xiàn)有的UI組件兼容
使用
安裝：
npm install vuedraggable
頁面引入：
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 使用 echarts 繪制中國地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-router 默認(rèn)是hash模式，使用url的hash來模擬一個完整的url，當(dāng)url改變的時候，頁面不會重新加載。這篇文章主要介紹了在nginx上部署vue項目(history模式),需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue3+Echarts頁面加載不渲染顯示空白頁面的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue項目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng))
這篇文章主要介紹了Vue項目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng)),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
本篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue-admin-template?動態(tài)路由的實(shí)現(xiàn)示例
本文主要介紹了ue-admin-template動態(tài)路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01