Vue組件Draggable實現(xiàn)拖拽功能
更新時間：2021年09月15日 11:29:56 作者：葉落森
這篇文章主要為大家詳細介紹了Vue組件Draggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Draggable為基于Sortable.js的vue組件，用以實現(xiàn)拖拽功能。
具體說明，請參考：學習鏈接
npm官方演示：
vuedraggable特性：
- 支持觸摸設備
- 支持拖拽和選擇文本
- 支持智能滾動
- 支持不同列表之間的拖拽
- 不以jQuery為基礎
- 和視圖模型同步刷新
- 和vue2的國度動畫兼容
- 支持撤銷操作
- 當需要完全控制時，可以拋出所有變化
- 可以和現(xiàn)有的UI組件兼容
使用
安裝：
npm install vuedraggable
頁面引入：
import draggable from 'vuedraggable'
data定義數(shù)據(jù)進行模擬：這是排序的案例，跟上面圖不一樣
<template>
<div>
<!-- 調用組件 -->
<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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 修改網站圖標的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
本文主要介紹了Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue數(shù)組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了vue組件prop驗證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-06-06
html+vue.js 實現(xiàn)漂亮分頁功能可兼容IE
功能比較簡單，在單一html中使用vue.js分頁展示數(shù)據(jù)，并未安裝腳手架，或使用相關UI框架，此時需要手寫一個分頁器，不失為最合理最便捷的解決方案,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了淺談vue3中effect與computed的親密關系，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要為大家介紹了vue3數(shù)組或對象賦值不更新解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
今天小編就為大家分享一篇對vue中v-on綁定自定事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3封裝echarts圖表數(shù)據(jù)無法渲染到頁面問題
這篇文章主要介紹了vue3封裝echarts圖表數(shù)據(jù)無法渲染到頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09