Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。
Vue.Draggable 的属性和方法请参考 Sortable.js。
一、安装
npm i -S vuedraggable
二、基本示例
<template>
<div class="home">
<draggable
v-model="arr1"
group="site"
animation="300"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
>
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{
{ item.name }}
</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
data() {
return {
arr1: [
{ id: 1, name: "www.itxst.com" },
{ id: 2, name: "www.jd.com" },
{ id: 3, name: "www.baidu.com" },
{ id: 4, name: "www.taobao.com" },
],
};
},
components: {
draggable,
},
};
</script>
<style scoped>
.ghostClass {
background-color: rgb(84, 84, 228) !important;
}
.chosenClass {
background-color: red !important;
opacity: 1 !important;
}
.dragClass {
background-color: rgb(137, 65, 204) !important;
opacity: 1 !important;
box-shadow: none !important;
outline: none !important;
background-image: none !important;
}
.item {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
}
.item:hover {
background-color: #fdfdfd;
cursor: move;
}
.item + .item {
border-top: none;
margin-top: 6px;
}
</style>