Skip to content

Commit 56b37af

Browse files
lin-xinlin-xin
committed
拖动排序
1 parent 47d1d4e commit 56b37af

File tree

1 file changed

+104
-117
lines changed

1 file changed

+104
-117
lines changed

‎src/components/page/DragList.vue

Lines changed: 104 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,105 @@
1-
<template>
2-
<section class="main">
3-
<div class="crumbs">
4-
<el-breadcrumb separator="/">
5-
<el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
6-
</el-breadcrumb>
7-
</div>
8-
<div class="drag-box-left">
9-
<div class="drag-title">未完成</div>
10-
<div class="drag-list" draggable="true"
11-
v-for="list in data1"
12-
:data-id="list.id"
13-
@dragstart="dragstartEvent"
14-
@dragend="dragendEvent"
15-
@dragenter="dragenterEvent"
16-
@dragleave="dragleaveEvent"
17-
@dragover="dragoverEvent"
18-
>{{list.title}}</div>
19-
</div>
20-
<div class="drag-box-right">
21-
<div class="drag-title">已完成</div>
22-
<div class="drag-list" draggable="true"
23-
v-for="list in data2"
24-
:data-id="list.id"
25-
@dragstart="dragstartEvent"
26-
@dragend="dragendEvent"
27-
@dragenter="dragenterEvent"
28-
@dragleave="dragleaveEvent"
29-
@dragover="dragoverEvent"
30-
>{{list.title}}</div>
31-
</div>
32-
33-
</section>
34-
</template>
35-
36-
<script>
37-
export default {
38-
data() {
39-
return {
40-
dragElement: null,
41-
lock: true,
42-
data1: [
43-
{id: 1, title: '这里是列表1的标题'},
44-
{id: 2, title: '这里是列表2的标题'},
45-
{id: 3, title: '这里是列表3的标题'},
46-
{id: 4, title: '这里是列表4的标题'},
47-
{id: 5, title: '这里是列表5的标题'},
48-
{id: 6, title: '这里是列表6的标题'},
49-
{id: 7, title: '这里是列表7的标题'}
50-
],
51-
data2: [
52-
{id: 1, title: '这里是列表11的标题'},
53-
{id: 2, title: '这里是列表12的标题'},
54-
{id: 3, title: '这里是列表13的标题'},
55-
{id: 4, title: '这里是列表14的标题'}
56-
]
57-
}
58-
},
59-
methods: {
60-
dragstartEvent(ev) {
61-
const self = this;
62-
self.dragElement = ev.target;
63-
ev.target.style.backgroundColor = '#f8f8f8';
64-
},
65-
dragendEvent(ev) {
66-
ev.target.style.backgroundColor = '#fff';
67-
ev.preventDefault();
68-
},
69-
dragenterEvent(ev) {
70-
const self = this;
71-
if(self.dragElement != ev.target){
72-
ev.target.parentNode.insertBefore(self.dragElement, ev.target);
73-
}
74-
},
75-
dragleaveEvent(ev) {
76-
const self = this;
77-
if(self.dragElement != ev.target){
78-
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
79-
ev.target.parentNode.appendChild(self.dragElement);
80-
self.lock = false;
81-
}else{
82-
self.lock = true;
83-
}
84-
}
85-
},
86-
dragoverEvent(ev) {
87-
ev.preventDefault();
88-
}
89-
}
90-
}
91-
</script>
92-
93-
<style scoped>
94-
.drag-box-left{
95-
float: left;
96-
width: 45%;
97-
}
98-
.drag-box-right{
99-
float: right;
100-
width: 45%;
101-
}
102-
.drag-list{
103-
border: 1px solid #ddd;
104-
padding:20px;
105-
margin-bottom: 20px;
106-
transition: border .3s;
107-
}
108-
.drag-list:hover{
109-
border: 1px solid #20a0ff;
110-
}
111-
.drag-title{
112-
font-weight: 400;
113-
line-height: 50px;
114-
margin: 10px 0;
115-
font-size: 22px;
116-
color: #1f2f3d;
117-
}
1+
<template>
2+
<section class="main">
3+
<div class="crumbs">
4+
<el-breadcrumb separator="/">
5+
<el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
6+
</el-breadcrumb>
7+
</div>
8+
<div class="drag-box-left">
9+
<div class="drag-title">拖动排序</div>
10+
<div class="drag-list" draggable="true"
11+
v-for="list in data1"
12+
:data-id="list.id"
13+
@dragstart="dragstartEvent"
14+
@dragend="dragendEvent"
15+
@dragenter="dragenterEvent"
16+
@dragleave="dragleaveEvent"
17+
@dragover="dragoverEvent"
18+
>{{list.title}}</div>
19+
</div>
20+
</section>
21+
</template>
22+
23+
<script>
24+
export default {
25+
data() {
26+
return {
27+
dragElement: null,
28+
lock: true,
29+
data1: [
30+
{id: 1, title: '这里是列表1的标题'},
31+
{id: 2, title: '这里是列表2的标题'},
32+
{id: 3, title: '这里是列表3的标题'},
33+
{id: 4, title: '这里是列表4的标题'},
34+
{id: 5, title: '这里是列表5的标题'},
35+
{id: 6, title: '这里是列表6的标题'},
36+
{id: 7, title: '这里是列表7的标题'}
37+
],
38+
data2: [
39+
{id: 1, title: '这里是列表11的标题'},
40+
{id: 2, title: '这里是列表12的标题'},
41+
{id: 3, title: '这里是列表13的标题'},
42+
{id: 4, title: '这里是列表14的标题'}
43+
]
44+
}
45+
},
46+
methods: {
47+
dragstartEvent(ev) {
48+
const self = this;
49+
self.dragElement = ev.target;
50+
ev.target.style.backgroundColor = '#f8f8f8';
51+
},
52+
dragendEvent(ev) {
53+
ev.target.style.backgroundColor = '#fff';
54+
ev.preventDefault();
55+
},
56+
dragenterEvent(ev) {
57+
const self = this;
58+
if(self.dragElement != ev.target){
59+
ev.target.parentNode.insertBefore(self.dragElement, ev.target);
60+
}
61+
},
62+
dragleaveEvent(ev) {
63+
const self = this;
64+
if(self.dragElement != ev.target){
65+
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
66+
ev.target.parentNode.appendChild(self.dragElement);
67+
self.lock = false;
68+
}else{
69+
self.lock = true;
70+
}
71+
}
72+
},
73+
dragoverEvent(ev) {
74+
ev.preventDefault();
75+
}
76+
}
77+
}
78+
</script>
79+
80+
<style scoped>
81+
.drag-box-left{
82+
float: left;
83+
width: 45%;
84+
}
85+
.drag-box-right{
86+
float: right;
87+
width: 45%;
88+
}
89+
.drag-list{
90+
border: 1px solid #ddd;
91+
padding:10px;
92+
margin-bottom: 20px;
93+
transition: border .3s;
94+
}
95+
.drag-list:hover{
96+
border: 1px solid #20a0ff;
97+
}
98+
.drag-title{
99+
font-weight: 400;
100+
line-height: 25px;
101+
margin: 10px 0;
102+
font-size: 22px;
103+
color: #1f2f3d;
104+
}
118105
</style>

0 commit comments

Comments
 (0)