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

拖动排序

old_v2.1.0
lin-xin 2017-07-12 15:25:37 +08:00
parent 47d1d4eaea
commit 56b37afd5e
1 changed files with 104 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,118 +1,105 @@
<template> <template>
<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-upload2"></i> 拖拽排序</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="drag-box-left"> <div class="drag-box-left">
<div class="drag-title">未完成</div> <div class="drag-title">拖动排序</div>
<div class="drag-list" draggable="true" <div class="drag-list" draggable="true"
v-for="list in data1" v-for="list in data1"
:data-id="list.id" :data-id="list.id"
@dragstart="dragstartEvent" @dragstart="dragstartEvent"
@dragend="dragendEvent" @dragend="dragendEvent"
@dragenter="dragenterEvent" @dragenter="dragenterEvent"
@dragleave="dragleaveEvent" @dragleave="dragleaveEvent"
@dragover="dragoverEvent" @dragover="dragoverEvent"
>{{list.title}}</div> >{{list.title}}</div>
</div> </div>
<div class="drag-box-right"> </section>
<div class="drag-title">已完成</div> </template>
<div class="drag-list" draggable="true"
v-for="list in data2" <script>
:data-id="list.id" export default {
@dragstart="dragstartEvent" data() {
@dragend="dragendEvent" return {
@dragenter="dragenterEvent" dragElement: null,
@dragleave="dragleaveEvent" lock: true,
@dragover="dragoverEvent" data1: [
>{{list.title}}</div> {id: 1, title: '这里是列表1的标题'},
</div> {id: 2, title: '这里是列表2的标题'},
{id: 3, title: '这里是列表3的标题'},
</section> {id: 4, title: '这里是列表4的标题'},
</template> {id: 5, title: '这里是列表5的标题'},
{id: 6, title: '这里是列表6的标题'},
<script> {id: 7, title: '这里是列表7的标题'}
export default { ],
data() { data2: [
return { {id: 1, title: '这里是列表11的标题'},
dragElement: null, {id: 2, title: '这里是列表12的标题'},
lock: true, {id: 3, title: '这里是列表13的标题'},
data1: [ {id: 4, title: '这里是列表14的标题'}
{id: 1, title: '这里是列表1的标题'}, ]
{id: 2, title: '这里是列表2的标题'}, }
{id: 3, title: '这里是列表3的标题'}, },
{id: 4, title: '这里是列表4的标题'}, methods: {
{id: 5, title: '这里是列表5的标题'}, dragstartEvent(ev) {
{id: 6, title: '这里是列表6的标题'}, const self = this;
{id: 7, title: '这里是列表7的标题'} self.dragElement = ev.target;
], ev.target.style.backgroundColor = '#f8f8f8';
data2: [ },
{id: 1, title: '这里是列表11的标题'}, dragendEvent(ev) {
{id: 2, title: '这里是列表12的标题'}, ev.target.style.backgroundColor = '#fff';
{id: 3, title: '这里是列表13的标题'}, ev.preventDefault();
{id: 4, title: '这里是列表14的标题'} },
] dragenterEvent(ev) {
} const self = this;
}, if(self.dragElement != ev.target){
methods: { ev.target.parentNode.insertBefore(self.dragElement, ev.target);
dragstartEvent(ev) { }
const self = this; },
self.dragElement = ev.target; dragleaveEvent(ev) {
ev.target.style.backgroundColor = '#f8f8f8'; const self = this;
}, if(self.dragElement != ev.target){
dragendEvent(ev) { if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
ev.target.style.backgroundColor = '#fff'; ev.target.parentNode.appendChild(self.dragElement);
ev.preventDefault(); self.lock = false;
}, }else{
dragenterEvent(ev) { self.lock = true;
const self = this; }
if(self.dragElement != ev.target){ }
ev.target.parentNode.insertBefore(self.dragElement, ev.target); },
} dragoverEvent(ev) {
}, ev.preventDefault();
dragleaveEvent(ev) { }
const self = this; }
if(self.dragElement != ev.target){ }
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){ </script>
ev.target.parentNode.appendChild(self.dragElement);
self.lock = false; <style scoped>
}else{ .drag-box-left{
self.lock = true; float: left;
} width: 45%;
} }
}, .drag-box-right{
dragoverEvent(ev) { float: right;
ev.preventDefault(); width: 45%;
} }
} .drag-list{
} border: 1px solid #ddd;
</script> padding:10px;
margin-bottom: 20px;
<style scoped> transition: border .3s;
.drag-box-left{ }
float: left; .drag-list:hover{
width: 45%; border: 1px solid #20a0ff;
} }
.drag-box-right{ .drag-title{
float: right; font-weight: 400;
width: 45%; line-height: 25px;
} margin: 10px 0;
.drag-list{ font-size: 22px;
border: 1px solid #ddd; color: #1f2f3d;
padding:20px; }
margin-bottom: 20px;
transition: border .3s;
}
.drag-list:hover{
border: 1px solid #20a0ff;
}
.drag-title{
font-weight: 400;
line-height: 50px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
</style> </style>