10 分钟上手 Vue 组件 Vue-Draggable

Vue 综合了 Angualr 和 React 的优点，因其易上手，轻量级，受到了广泛应用。成为了是时下火热的前端框架，吸引着越来越多的前端开发者！

本文将通过一个最简单的拖拽例子带领大家快速上手 Vue 组件 Vue-Draggable。

首先，需要在工作环境中配置好 Vue-cli，创建一个 vue 项目。

vue create test_1

创建项目时会有很多安装步骤，按下面的说明选择配置：

1.pick a preset 选择 Manually select features

2.Check the features needed for your project 选择 Babel 和 CSS Pre-processors 两项（使用空格键来选中或取消）

3.Pick a CSS pre-processor 选择 Sass/SCSS(with node-sass)

4.Where do you prefer placing config 选择 In dedicated config files

5.Save this as a preset for future projects？选 yes ，并填写一个名字，以后的 Vue 项目就可以继续使用这个配置

6. Pick the package manager to use when installing dependencies 选择 Use NPM（有些同学安装可能不会遇到这步）

OK，准备工作做好，下面我们可以进入 Vue-Draggable 的内容。

首先， cd test_1 进入项目目录，配置一下 Vue-Draggable。

npm i vuedraggable -S

接着,在 src/components 目录下新建 Draggable.vue。

在 <script> 中引入并且注册 vuedraggable 组件,再写一点数据后面验证用：

<script>
import Draggable from "vuedraggable"const message = ["vue.draggable","draggable","component","for","vue.js 2.0","based","on","Sortablejs"
]export default {components: {Draggable},data () {return {list: message.map((name, index) => {return { name, order: index + 1 };})}}
}
</script>

然后我们就可以在中愉快的使用 draggable。

<template><draggableclass="list-group"tag="ul"v-model="list"v-bind="{animation: 200,group: 'description',disabled: false,ghostClass: 'ghost'}"><liclass="list-group-item"v-for="element in list":key="element.order">{{ element.name }}</li></draggable>
</template>

注意，draggable 标签中，tag = ‘ul’ 用来指定 draggable 组件渲染出来的 html 标签。v-model 绑定列表可拖动的元素，也就是 data() 中的 list，通常与 draggable 中的内部元素 v-for 的引用一致。

v-bind 绑定 draggable 组件的配置项，可以看看具体讲解：

group：string or object
string：命名，用处是为了设置可以拖放容器时使用
object: {name, pull, put}
name: 同 string 的方法
pull：pull 用来定义从这个列表容器移动出去的设置，true/false/‘clone’/function
true:列表容器内的列表元素可以被移出；
false：列表容器内的列表元素不可以被移出；
clone：列表元素移出，移动的为该元素的副本；
function：用来进行 pull 的函数判断，可以进行复杂逻辑，在函数中 return false/true 来判断是否移出；
put：put 用来定义往这个列表容器放置列表元素的的设置，true/false/[‘foo’,‘bar’]/function
true:列表容器可以从其他列表容器内放入列表元素；
false：与 true 相反；
[‘foo’,‘bar’]：这个可以是一个字符串或者是字符串的数组，代表的是 group 配置项里定义的 name 值；
function：用来进行 put 的函数判断，可以进行复杂逻辑，在函数中 return false/true 来判断是否放入
animation: number 单位：ms，定义动画的时间；
disabled: boolean 定义此 sortable 对象是否可用，为 true 时 sortable 对象不能拖放排序等功能，为 false 时为可以进行排序，相当于一个开关；
ghostClass：selector 格式为简单 css 选择器的字符串，当拖动列表元素时会生成一个副本作为影子元素来模拟被拖动元素排序的情况，此配置项就是来给这个影子元素添加一个 class，我们可以通过这种方式来给影子元素进行编辑样式；
sort: boolean 定义是否列表元素是否可以在列表容器内进行拖拽排序；
delay: number 定义鼠标选中列表元素可以开始拖动的延迟时间；
handle: selector 格式为简单 css 选择器的字符串，使列表元素中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表元素进行拖动；
filter: selector 格式为简单 css 选择器的字符串，定义哪些列表元素不能进行拖放，可设置为多个选择器，中间用“,”分隔
draggable：selector 格式为简单 css 选择器的字符串，定义哪些列表元素可以进行拖放
chosenClass：selector 格式为简单 css 选择器的字符串，当选中列表元素时会给该元素增加一个 class；
forceFallback：boolean 如果设置为 true 时，将不使用原生的 html5 的拖放，可以修改一些拖放中元素的样式等；
fallbackClass：string 当 forceFallback 设置为 true 时，拖放过程中鼠标附着元素的样式；
scroll：boolean 默认为 true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动。

再配置一下对应 class 样式：

<style lang="scss">
.ghost {opacity: 0.5;background: #c8ebfb;
}
.list-group {min-height: 20px;list-style: none;
}
.list-group-item {cursor: move;height: 30px;line-height: 30px;border: 1px solid #ccc;
}</style>

最后，修改一下 App.vue 注册组件:

<template><div id="app"><draggable></draggable></div>
</template><script>
import Draggable from './components/Draggable'export default {name: 'app',components: {Draggable}
}
</script>

启动项目，在浏览器中查看一下效果！

npm run server

很简单对吧，10 分钟快速食用完毕！

10 分钟上手 Vue 组件 Vue-Draggable相关推荐

Vue3.0 10分钟上手体验-Vite
1.Vite 简单介绍 Vite 是由 Vue 作者尤雨溪开发的一套一种新的.更快地 web 开发工具,它具快速的冷启动.即时的模块热更新.真正的按需编译几个特点. 作者曾在微博上发言:Vite,一个 ...
Vue组件+Vue动画
目录 Vue选项自定义指令过滤,管道filters 全局组件局部组件 props传递参数 props细节组件传参父传子组件传值总结组件的插槽(嵌套) 具名插槽弹框组件的使用htt ...
html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...
10 分钟上手 Vim，常用命令大盘点
传闻有 180 万的程序员不知道如何退出 Vim 编辑器,真的有这么困难吗?下面给大家整理了一份 Vim 常用命令,让你 10 分钟快速上手 Vim,溜得飞起! 以下命令请在普通模式执行 1.移动光标 ...
vue组件+vue插件的创建和使用
一.vue组件的概念是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签.因为组件是可复用的Vue实例,所以它们与new Vue ...
10分钟上手pythonpandas_10分钟学pandas（10 Minutes to pandas）-全文翻译
简介本文是对<10 Minutes to pandas>的全文翻译,版本为0.23.4.概括性地讲解pandas的使用方法.PS:谁说的10分钟,保证不打死他- 通常,我们导入如下命令: ...
10 分钟使用 Spring Boot + Vue + Antd + US3 搭建自己的图床
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多网上已经 ...
js 加入debug后可以进入controller_写给前端的 Nest.js 教程——10分钟上手后端接口开发
前言沉默了很久,一直都没发文章,有些惭愧. 最近实习结束之后回了学校,提前开始做毕业设计了.对,就是毕业设计. 近两个月把 React Native.Vue 3.0 和 Nest.js 都摸了一下, ...
vue 组件 Vue.component 用法
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 1.插槽内可以放置什么内容? 2.默认插槽 3.具名插 ...

10 分钟上手 Vue 组件 Vue-Draggable

10 分钟上手 Vue 组件 Vue-Draggable相关推荐

最新文章

热门文章