github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'完成拖拽列表页面'

pull/78/head
lin-xin 2018-04-11 17:24:57 +08:00
parent 6531f7fac9
commit aa01f3b5dd
4 changed files with 163 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -14,6 +14,7 @@
"babel-polyfill": "^6.23.0", "babel-polyfill": "^6.23.0",
"element-ui": "2.3.3", "element-ui": "2.3.3",
"mavon-editor": "^2.5.2", "mavon-editor": "^2.5.2",
"sortablejs": "^1.7.0",
"vue": "^2.5.16", "vue": "^2.5.16",
"vue-core-image-upload": "2.1.11", "vue-core-image-upload": "2.1.11",
"vue-datasource": "1.0.12", "vue-datasource": "1.0.12",

20
src/components/common/Sidebar.vue
View File

@ -41,11 +41,11 @@
title: '常用表格', title: '常用表格',
subs: [ subs: [
{ {
index: 'basetable', index: 'table',
title: '基础表格' title: '基础表格'
}, },
{ {
index: 'vuetable', index: 'datasource',
title: 'datasource表格' title: 'datasource表格'
} }
] ]
@ -56,11 +56,11 @@
title: '表单相关', title: '表单相关',
subs: [ subs: [
{ {
index: 'baseform', index: 'form',
title: '基本表单' title: '基本表单'
}, },
{ {
index: 'vueeditor', index: 'editor',
title: '富文本编辑器' title: '富文本编辑器'
}, },
{ {
@ -75,14 +75,14 @@
}, },
{ {
icon: 'el-icon-star-on', icon: 'el-icon-star-on',
index: 'basecharts', index: 'charts',
title: 'schart图表' title: 'schart图表'
}, },
// { {
// icon: 'el-icon-edit', icon: 'el-icon-rank',
// index: 'drag', index: 'drag',
// title: '拖拽列表' title: '拖拽列表'
// }, },
{ {
icon: 'el-icon-warning', icon: 'el-icon-warning',
index: 'permission', index: 'permission',

203
src/components/page/DragList.vue
View File

@ -2,100 +2,181 @@
<section class="main"> <section class="main">
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <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> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<div class="drag-box-left"> <div class="drag-box">
<div class="drag-title">拖动排序</div> <div class="drag-box-item">
<div class="drag-list" draggable="true" <div class="item-title">todo</div>
v-for="list in data1" <ul id="todo" class="item-ul">
:data-id="list.id" <li v-for="(item, index) in todo" :key="index" class="drag-list" :data-index="index">
@dragstart="dragstartEvent" {{ item.content }}
@dragend="dragendEvent" </li>
@dragenter="dragenterEvent" </ul>
@dragleave="dragleaveEvent" </div>
@dragover="dragoverEvent" <div class="drag-box-item">
:key="list.id" <div class="item-title">doing</div>
>{{list.title}}</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>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import Sortable from 'sortablejs';
export default { export default {
data() { data() {
return { return {
todo: [
{
content: '开发图表组件'
},
{
content: '开发拖拽组件'
},
{
content: '开发权限测试组件'
}
],
doing: [
{
content: '开发登录注册页面'
},
{
content: '开发头部组件'
},
{
content: '开发表格相关组件'
},
{
content: '开发表单相关组件'
}
],
done:[
{
content: '初始化项目，生成工程目录，完成相关配置'
},
{
content: '开发项目整体框架'
}
],
dragElement: null, dragElement: null,
lock: true, 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: { methods: {
dragstartEvent(ev) { initSortable(id, vm){
this.dragElement = ev.target; let list = document.getElementById(id);
ev.target.style.backgroundColor = '#f8f8f8'; Sortable.create(list, {
group: {
name: 'list',
pull: true
}, },
dragendEvent(ev) { ghostClass: 'placeholder-style',
ev.target.style.backgroundColor = '#fff'; animation: 120,
ev.preventDefault(); scroll: true,
}, onRemove(event) {
dragenterEvent(ev) { let content;
if(this.dragElement != ev.target){ const idx = event.item.getAttribute('data-index');
ev.target.parentNode.insertBefore(this.dragElement, ev.target); 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);
} }
}, },
dragleaveEvent(ev) { onEnd(event){
if(this.dragElement != ev.target){ if(event.to.id === event.from.id){
if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){ event.item.removeAttribute('draggable');
ev.target.parentNode.appendChild(this.dragElement);
this.lock = false;
}else{
this.lock = true;
} }
} }
});
}
}, },
dragoverEvent(ev) { mounted() {
ev.preventDefault(); 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> </script>
<style scoped> <style scoped>
.drag-box-left{ .drag-box{
float: left; display: flex;
width: 45%; user-select: none;
} }
.drag-box-right{ .drag-box-item {
float: right; flex: 1;
width: 45%; max-width: 330px;
min-width: 300px;
background-color: #eff1f5;
margin-right: 16px;
border-radius: 6px;
border: 1px #e1e4e8 solid;
} }
.drag-list{ .item-title{
border: 1px solid #ddd; padding: 8px 8px 8px 12px;
padding:10px; font-size: 14px;
margin-bottom: 20px; line-height: 1.5;
transition: border .3s; 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; border: 1px solid #20a0ff;
} }
.drag-title{ .drag-title {
font-weight: 400; font-weight: 400;
line-height: 25px; line-height: 25px;
margin: 10px 0; margin: 10px 0;

10
src/router/index.js
View File

@ -18,21 +18,21 @@ export default new Router({
component: resolve => require(['../components/page/Readme.vue'], resolve) component: resolve => require(['../components/page/Readme.vue'], resolve)
}, },
{ {
path: '/basetable', path: '/table',
component: resolve => require(['../components/page/BaseTable.vue'], resolve) component: resolve => require(['../components/page/BaseTable.vue'], resolve)
}, },
{ {
// vue-datasource组件 // vue-datasource组件
path: '/vuetable', path: '/datasource',
component: resolve => require(['../components/page/VueTable.vue'], resolve) component: resolve => require(['../components/page/VueTable.vue'], resolve)
}, },
{ {
path: '/baseform', path: '/form',
component: resolve => require(['../components/page/BaseForm.vue'], resolve) component: resolve => require(['../components/page/BaseForm.vue'], resolve)
}, },
{ {
// Vue-Quill-Editor组件 // Vue-Quill-Editor组件
path: '/vueeditor', path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve) component: resolve => require(['../components/page/VueEditor.vue'], resolve)
}, },
{ {
@ -47,7 +47,7 @@ export default new Router({
}, },
{ {
// vue-schart组件 // vue-schart组件
path: '/basecharts', path: '/charts',
component: resolve => require(['../components/page/BaseCharts.vue'], resolve) component: resolve => require(['../components/page/BaseCharts.vue'], resolve)
}, },
{ {