Skip to content

Commit a143dea

Browse files
lin-xinlin-xin
committed
'使用vuedraggable代替sortablejs'
1 parent aa01f3b commit a143dea

File tree

4 files changed

+44
-72
lines changed

4 files changed

+44
-72
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
"babel-polyfill": "^6.23.0",
1515
"element-ui": "2.3.3",
1616
"mavon-editor": "^2.5.2",
17-
"sortablejs": "^1.7.0",
1817
"vue": "^2.5.16",
1918
"vue-core-image-upload": "2.1.11",
2019
"vue-datasource": "1.0.12",
2120
"vue-quill-editor": "3.0.6",
2221
"vue-router": "^3.0.1",
23-
"vue-schart": "^0.1.4"
22+
"vue-schart": "^0.1.4",
23+
"vuedraggable": "^2.16.0"
2424
},
2525
"devDependencies": {
2626
"autoprefixer": "^7.1.2",

‎src/components/page/DragList.vue

Lines changed: 39 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,49 @@
99
<div class="drag-box">
1010
<div class="drag-box-item">
1111
<div class="item-title">todo</div>
12-
<ul id="todo" class="item-ul">
13-
<li v-for="(item, index) in todo" :key="index" class="drag-list" :data-index="index">
14-
{{ item.content }}
15-
</li>
16-
</ul>
12+
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
13+
<transition-group tag="div" id="todo" class="item-ul">
14+
<div v-for="(item,index) in todo" class="drag-list" :key="index">
15+
{{item.content}}
16+
</div>
17+
</transition-group>
18+
</draggable>
1719
</div>
1820
<div class="drag-box-item">
1921
<div class="item-title">doing</div>
20-
<ul id="doing" class="item-ul">
21-
<li v-for="(item, index) in doing" :key="index" class="drag-list" :data-index="index">
22-
{{ item.content }}
23-
</li>
24-
</ul>
22+
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
23+
<transition-group tag="div" id="doing" class="item-ul">
24+
<div v-for="(item,index) in doing" class="drag-list" :key="index">
25+
{{item.content}}
26+
</div>
27+
</transition-group>
28+
</draggable>
2529
</div>
2630
<div class="drag-box-item">
2731
<div class="item-title">done</div>
28-
<ul id="done" class="item-ul">
29-
<li v-for="(item, index) in done" :key="index" class="drag-list" :data-index="index">
30-
{{ item.content }}
31-
</li>
32-
</ul>
32+
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
33+
<transition-group tag="div" id="done" class="item-ul">
34+
<div v-for="(item,index) in done" class="drag-list" :key="index">
35+
{{item.content}}
36+
</div>
37+
</transition-group>
38+
</draggable>
3339
</div>
3440
</div>
3541
</div>
3642
</section>
3743
</template>
3844

3945
<script>
40-
import Sortable from 'sortablejs';
46+
import draggable from 'vuedraggable'
4147
export default {
4248
data() {
4349
return {
50+
dragOptions:{
51+
animation: 120,
52+
group: 'sortlist',
53+
ghostClass: 'ghost-style'
54+
},
4455
todo: [
4556
{
4657
content: '开发图表组件'
@@ -73,58 +84,17 @@
7384
{
7485
content: '开发项目整体框架'
7586
}
76-
],
77-
dragElement: null,
78-
lock: true,
79-
87+
]
8088
}
8189
},
90+
components:{
91+
draggable
92+
},
8293
methods: {
83-
initSortable(id, vm){
84-
let list = document.getElementById(id);
85-
Sortable.create(list, {
86-
group: {
87-
name: 'list',
88-
pull: true
89-
},
90-
ghostClass: 'placeholder-style',
91-
animation: 120,
92-
scroll: true,
93-
onRemove(event) {
94-
let content;
95-
const idx = event.item.getAttribute('data-index');
96-
if(event.from.id === 'todo'){
97-
content = vm.todo[idx];
98-
}else if(event.from.id === 'doing'){
99-
content = vm.doing[idx];
100-
}else if(event.from.id === 'done'){
101-
content = vm.done[idx];
102-
}
103-
if(event.to.id === 'todo'){
104-
vm.todo.splice(event.newIndex, 0, content);
105-
}else if(event.to.id === 'doing'){
106-
vm.doing.splice(event.newIndex, 0, content);
107-
}else if(event.to.id === 'done'){
108-
vm.done.splice(event.newIndex, 0, content);
109-
}
110-
},
111-
onEnd(event){
112-
if(event.to.id === event.from.id){
113-
event.item.removeAttribute('draggable');
114-
}
115-
}
116-
});
94+
removeHandle(event){
95+
console.log(event);
96+
this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
11797
}
118-
},
119-
mounted() {
120-
document.body.ondrop = function (event) {
121-
event.preventDefault();
122-
event.stopPropagation();
123-
};
124-
let vm = this;
125-
this.initSortable('todo', this);
126-
this.initSortable('doing', this);
127-
this.initSortable('done', this);
12898
}
12999
}
130100
@@ -170,9 +140,6 @@
170140
-webkit-transition: border .3s ease-in;
171141
transition: border .3s ease-in;
172142
}
173-
.drag-list[draggable="false"]{
174-
display: none;
175-
}
176143
.drag-list:hover {
177144
border: 1px solid #20a0ff;
178145
}
@@ -183,4 +150,9 @@
183150
font-size: 22px;
184151
color: #1f2f3d;
185152
}
153+
.ghost-style{
154+
display: block;
155+
color: transparent;
156+
border-style: dashed
157+
}
186158
</style>

‎src/components/page/VueTable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="table">
33
<div class="crumbs">
44
<el-breadcrumb separator="/">
5-
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
5+
<el-breadcrumb-item><i class="el-icon-tickets"></i> 表格</el-breadcrumb-item>
66
<el-breadcrumb-item>VueDatasource</el-breadcrumb-item>
77
</el-breadcrumb>
88
</div>

‎src/router/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default new Router({
3131
component: resolve => require(['../components/page/BaseForm.vue'], resolve)
3232
},
3333
{
34-
// Vue-Quill-Editor组件
34+
// 富文本编辑器组件
3535
path: '/editor',
3636
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
3737
},
@@ -41,7 +41,7 @@ export default new Router({
4141
component: resolve => require(['../components/page/Markdown.vue'], resolve)
4242
},
4343
{
44-
// Vue-Core-Image-Upload组件
44+
// 图片上传组件
4545
path: '/upload',
4646
component: resolve => require(['../components/page/Upload.vue'], resolve)
4747
},

0 commit comments

Comments
 (0)