这是我参与「第四届青训营 」笔记创作活动的第16天
在大项目低代码平台的开发中，需要实现不同组件的拖拽功能。作者希望通过本文，提供一种基于vue.draggable包以及Vue框架的可执行拖拽的方案。
首先，通过指令，在终端上下载拖拽的包：
>>> npm install vuedraggable --save-dev
将draggable添加到vue库，并且创建新的vue app
>>> vue create kalacloud-draggable
>>> cd kalacloud-draggable
通过npm来完成包的安装
>>> npm i -s vuedraggable
vue.draggable具有诸多优点：
- 支持触摸设备：不仅可以实现鼠标光标移动，也对触摸设备有很好的支持。
- 拖拽与选取文本识别：vue.draggable 可以识别拖拽动作或选择文字的动作。
- 对 Vue UI 库友好，可以把现有的 Vue 组件附加到可拖拽的元素上，实现这个组件的拖拽功能。
创建用于拖拽的组件table-draggable;
在app.js中添加语句:
Vue.component('table-draggable',require('./components/TableDraggable.vue'));
并在终端中输入
>>> npm run watch
我们先完成组件内部数据的获取：
public function home()
{
$testimonials = Testimonial::where('visible',true)->orderBy('order')->get()
return view('landing-page')->with([
'testimonials' => $testimonials,
]);
}
通过prop传递数据：
<table-draggable: testimonials="{{ $testimonials }}"></table-draggable>
在组件中申明prop：
export default {
props:['testimonials'],
mounted(){
console.log('Component mounted.')
}
}
到现在为止，我们已经可以将testimonials的prop通过数组展示出来：
下面就是如何利用draggable包实现拖拽操作了：
vue.draggable的优秀之处在于它开箱即用的特性，<draggable> 中的所有子元素都可实现拖拽功能。
添加以下样本代码，即可完成文字的拖拽操作：
<template>
<main>
<div>
<draggable :list="myList">
<div v-for="(list, i) in myList" :key="i">
{{ list }}
</div>
</draggable>
</div>
</main>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
myList: ["拖拽A", "拖拽B", "拖拽C"],
};
},
};
</script>
draggable包还有更多功能可以开发,比如：
- group: 实现两个或多个区域内组件的拖拽，各区域的 group 对象名需要命名一致。可以写成
group：‘kalacloud-group’或者group:{name:'kalacloud-group'} - clone: 拖拽时可将被拖拽组件复制到另一个区域
- 快速搭建任务管理看板
