'完成拖拽列表页面'
lin-xin
parent
6531f7fac9
commit
aa01f3b5dd
|
|
@ -14,6 +14,7 @@
|
|||
"babel-polyfill": "^6.23.0",
|
||||
"element-ui": "2.3.3",
|
||||
"mavon-editor": "^2.5.2",
|
||||
"sortablejs": "^1.7.0",
|
||||
"vue": "^2.5.16",
|
||||
"vue-core-image-upload": "2.1.11",
|
||||
"vue-datasource": "1.0.12",
|
||||
|
|
|
|||
|
|
@ -41,11 +41,11 @@
|
|||
title: '常用表格',
|
||||
subs: [
|
||||
{
|
||||
index: 'basetable',
|
||||
index: 'table',
|
||||
title: '基础表格'
|
||||
},
|
||||
{
|
||||
index: 'vuetable',
|
||||
index: 'datasource',
|
||||
title: 'datasource表格'
|
||||
}
|
||||
]
|
||||
|
|
@ -56,11 +56,11 @@
|
|||
title: '表单相关',
|
||||
subs: [
|
||||
{
|
||||
index: 'baseform',
|
||||
index: 'form',
|
||||
title: '基本表单'
|
||||
},
|
||||
{
|
||||
index: 'vueeditor',
|
||||
index: 'editor',
|
||||
title: '富文本编辑器'
|
||||
},
|
||||
{
|
||||
|
|
@ -75,14 +75,14 @@
|
|||
},
|
||||
{
|
||||
icon: 'el-icon-star-on',
|
||||
index: 'basecharts',
|
||||
index: 'charts',
|
||||
title: 'schart图表'
|
||||
},
|
||||
// {
|
||||
// icon: 'el-icon-edit',
|
||||
// index: 'drag',
|
||||
// title: '拖拽列表'
|
||||
// },
|
||||
{
|
||||
icon: 'el-icon-rank',
|
||||
index: 'drag',
|
||||
title: '拖拽列表'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-warning',
|
||||
index: 'permission',
|
||||
|
|
|
|||
|
|
@ -2,104 +2,185 @@
|
|||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
|
||||
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽排序</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="drag-box-left">
|
||||
<div class="drag-title">拖动排序</div>
|
||||
<div class="drag-list" draggable="true"
|
||||
v-for="list in data1"
|
||||
:data-id="list.id"
|
||||
@dragstart="dragstartEvent"
|
||||
@dragend="dragendEvent"
|
||||
@dragenter="dragenterEvent"
|
||||
@dragleave="dragleaveEvent"
|
||||
@dragover="dragoverEvent"
|
||||
:key="list.id"
|
||||
>{{list.title}}</div>
|
||||
<div class="drag-box">
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">todo</div>
|
||||
<ul id="todo" class="item-ul">
|
||||
<li v-for="(item, index) in todo" :key="index" class="drag-list" :data-index="index">
|
||||
{{ item.content }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">doing</div>
|
||||
<ul id="doing" class="item-ul">
|
||||
<li v-for="(item, index) in doing" :key="index" class="drag-list" :data-index="index">
|
||||
{{ item.content }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">done</div>
|
||||
<ul id="done" class="item-ul">
|
||||
<li v-for="(item, index) in done" :key="index" class="drag-list" :data-index="index">
|
||||
{{ item.content }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Sortable from 'sortablejs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
todo: [
|
||||
{
|
||||
content: '开发图表组件'
|
||||
},
|
||||
{
|
||||
content: '开发拖拽组件'
|
||||
},
|
||||
{
|
||||
content: '开发权限测试组件'
|
||||
}
|
||||
],
|
||||
doing: [
|
||||
{
|
||||
content: '开发登录注册页面'
|
||||
},
|
||||
{
|
||||
content: '开发头部组件'
|
||||
},
|
||||
{
|
||||
content: '开发表格相关组件'
|
||||
},
|
||||
{
|
||||
content: '开发表单相关组件'
|
||||
}
|
||||
],
|
||||
done:[
|
||||
{
|
||||
content: '初始化项目，生成工程目录，完成相关配置'
|
||||
},
|
||||
{
|
||||
content: '开发项目整体框架'
|
||||
}
|
||||
],
|
||||
dragElement: null,
|
||||
lock: true,
|
||||
data1: [
|
||||
{id: 1, title: '这里是列表1的标题'},
|
||||
{id: 2, title: '这里是列表2的标题'},
|
||||
{id: 3, title: '这里是列表3的标题'},
|
||||
{id: 4, title: '这里是列表4的标题'},
|
||||
{id: 5, title: '这里是列表5的标题'},
|
||||
{id: 6, title: '这里是列表6的标题'},
|
||||
{id: 7, title: '这里是列表7的标题'}
|
||||
],
|
||||
data2: [
|
||||
{id: 1, title: '这里是列表11的标题'},
|
||||
{id: 2, title: '这里是列表12的标题'},
|
||||
{id: 3, title: '这里是列表13的标题'},
|
||||
{id: 4, title: '这里是列表14的标题'}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dragstartEvent(ev) {
|
||||
this.dragElement = ev.target;
|
||||
ev.target.style.backgroundColor = '#f8f8f8';
|
||||
},
|
||||
dragendEvent(ev) {
|
||||
ev.target.style.backgroundColor = '#fff';
|
||||
ev.preventDefault();
|
||||
},
|
||||
dragenterEvent(ev) {
|
||||
if(this.dragElement != ev.target){
|
||||
ev.target.parentNode.insertBefore(this.dragElement, ev.target);
|
||||
}
|
||||
},
|
||||
dragleaveEvent(ev) {
|
||||
if(this.dragElement != ev.target){
|
||||
if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
|
||||
ev.target.parentNode.appendChild(this.dragElement);
|
||||
this.lock = false;
|
||||
}else{
|
||||
this.lock = true;
|
||||
initSortable(id, vm){
|
||||
let list = document.getElementById(id);
|
||||
Sortable.create(list, {
|
||||
group: {
|
||||
name: 'list',
|
||||
pull: true
|
||||
},
|
||||
ghostClass: 'placeholder-style',
|
||||
animation: 120,
|
||||
scroll: true,
|
||||
onRemove(event) {
|
||||
let content;
|
||||
const idx = event.item.getAttribute('data-index');
|
||||
if(event.from.id === 'todo'){
|
||||
content = vm.todo[idx];
|
||||
}else if(event.from.id === 'doing'){
|
||||
content = vm.doing[idx];
|
||||
}else if(event.from.id === 'done'){
|
||||
content = vm.done[idx];
|
||||
}
|
||||
if(event.to.id === 'todo'){
|
||||
vm.todo.splice(event.newIndex, 0, content);
|
||||
}else if(event.to.id === 'doing'){
|
||||
vm.doing.splice(event.newIndex, 0, content);
|
||||
}else if(event.to.id === 'done'){
|
||||
vm.done.splice(event.newIndex, 0, content);
|
||||
}
|
||||
},
|
||||
onEnd(event){
|
||||
if(event.to.id === event.from.id){
|
||||
event.item.removeAttribute('draggable');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dragoverEvent(ev) {
|
||||
ev.preventDefault();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.body.ondrop = function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
};
|
||||
let vm = this;
|
||||
this.initSortable('todo', this);
|
||||
this.initSortable('doing', this);
|
||||
this.initSortable('done', this);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drag-box-left{
|
||||
float: left;
|
||||
width: 45%;
|
||||
.drag-box{
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
.drag-box-right{
|
||||
float: right;
|
||||
width: 45%;
|
||||
.drag-box-item {
|
||||
flex: 1;
|
||||
max-width: 330px;
|
||||
min-width: 300px;
|
||||
background-color: #eff1f5;
|
||||
margin-right: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px #e1e4e8 solid;
|
||||
}
|
||||
.drag-list{
|
||||
border: 1px solid #ddd;
|
||||
padding:10px;
|
||||
margin-bottom: 20px;
|
||||
transition: border .3s;
|
||||
.item-title{
|
||||
padding: 8px 8px 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #24292e;
|
||||
font-weight: 600;
|
||||
}
|
||||
.drag-list:hover{
|
||||
.item-ul{
|
||||
padding: 0 8px 8px;
|
||||
height: 600px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.item-ul::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
.drag-list {
|
||||
border: 1px #e1e4e8 solid;
|
||||
padding: 10px;
|
||||
margin: 5px 0 10px;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: border .3s ease-in;
|
||||
transition: border .3s ease-in;
|
||||
}
|
||||
.drag-list[draggable="false"]{
|
||||
display: none;
|
||||
}
|
||||
.drag-list:hover {
|
||||
border: 1px solid #20a0ff;
|
||||
}
|
||||
.drag-title{
|
||||
.drag-title {
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,21 +18,21 @@ export default new Router({
|
|||
component: resolve => require(['../components/page/Readme.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/basetable',
|
||||
path: '/table',
|
||||
component: resolve => require(['../components/page/BaseTable.vue'], resolve)
|
||||
},
|
||||
{
|
||||
// vue-datasource组件
|
||||
path: '/vuetable',
|
||||
path: '/datasource',
|
||||
component: resolve => require(['../components/page/VueTable.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/baseform',
|
||||
path: '/form',
|
||||
component: resolve => require(['../components/page/BaseForm.vue'], resolve)
|
||||
},
|
||||
{
|
||||
// Vue-Quill-Editor组件
|
||||
path: '/vueeditor',
|
||||
path: '/editor',
|
||||
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
|
||||
},
|
||||
{
|
||||
|
|
@ -47,7 +47,7 @@ export default new Router({
|
|||
},
|
||||
{
|
||||
// vue-schart组件
|
||||
path: '/basecharts',
|
||||
path: '/charts',
|
||||
component: resolve => require(['../components/page/BaseCharts.vue'], resolve)
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue