Vue拖拽插件——Draglua 中文使用教程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue拖拽插件——Draglua 中文使用教程相关的知识，希望对你有一定的参考价值。
参考技术A本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。
1、npm安装
2、bower安装
3、CDN
注： 最好放在<body>中引用，不要放在<head>中。
需要引入一些css样式，在页面中引入 dist/dragula.css 或 dist/dragula.min.css ，如果你使用的是Stylus，你可以这样引入
下面的示例允许用户将元素从中left拖入right和从中right拖入left
您还可以提供一个options对象。以下是默认值的介绍
您可以省略container参数，稍后动态添加容器。
还可以从options对象设置容器
你还可以设置一个没有container和options的draglua
dragula方法返回一个带有简洁API的小对象。我们将把dragula返回的API称为drake。
Dragula只使用四个CSS类。下面将快速解释它们的用途
默认：
Github/dragula
Vue 中使用拖拽排序插件 Awe-dnd
1. 安装插件
npm install awe-dnd --save2. 引入插件
import VueDND from 'awe-dnd'
Vue.use(VueDND)3. 使用插件
<template>
<div class="title-list">
<div
v-dragging="{item: item, list:list}"
v-for="item in list"
:key="item.id"
class="title-item">
<div class="title-child">
<span>{{item.id +"－－"+ item.name }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "titleList",
data() {
return {
list: [
{id:1,name:"这是第一个标题名称"},
{id:2,name:"这是第二个标题名称"},
{id:3,name:"这是第三个标题名称"},
{id:4,name:"这是第四个标题名称"},
{id:5,name:"这是第五个标题名称"},
],
};
},
mounted() {
// 拖拽事件
this.$dragging.$on("dragged", (result) => {
// 将排序后的结果重新赋值
this.list = result.value.list;
});
},
};
</script>
<style lang="scss" scoped>
.title-list {
width: 350px;
background:#fff;
margin:100px auto 0;
border: 1px solid red;
.title-item {
width: 350px;
cursor: pointer;
border: 1px solid #ededed;
.title-child {
width: 330px;
height: 60px;
margin: 0 auto;
position: relative;
span {
width: 100%;
font-size: 14px;
color: red;
line-height: 30px;
// 只显示两行，多余的以省略号显示
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
// 无论一行还是两行均居中显示
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
}
}
}
</style>
以上是关于Vue拖拽插件——Draglua 中文使用教程的主要内容，如果未能解决你的问题，请参考以下文章
vue拖拽排序插件vuedraggable的使用 附原生使用方法