'使用vuedraggable代替sortablejs'

pull/78/head
lin-xin 2018-04-12 15:17:56 +08:00
parent aa01f3b5dd
commit a143deae45
4 changed files with 44 additions and 72 deletions

View File

@ -14,13 +14,13 @@
"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",
"vue-quill-editor": "3.0.6", "vue-quill-editor": "3.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-schart": "^0.1.4" "vue-schart": "^0.1.4",
"vuedraggable": "^2.16.0"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",

View File

@ -9,27 +9,33 @@
<div class="drag-box"> <div class="drag-box">
<div class="drag-box-item"> <div class="drag-box-item">
<div class="item-title">todo</div> <div class="item-title">todo</div>
<ul id="todo" class="item-ul"> <draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
<li v-for="(item, index) in todo" :key="index" class="drag-list" :data-index="index"> <transition-group tag="div" id="todo" class="item-ul">
{{ item.content }} <div v-for="(item,index) in todo" class="drag-list" :key="index">
</li> {{item.content}}
</ul> </div>
</transition-group>
</draggable>
</div> </div>
<div class="drag-box-item"> <div class="drag-box-item">
<div class="item-title">doing</div> <div class="item-title">doing</div>
<ul id="doing" class="item-ul"> <draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
<li v-for="(item, index) in doing" :key="index" class="drag-list" :data-index="index"> <transition-group tag="div" id="doing" class="item-ul">
{{ item.content }} <div v-for="(item,index) in doing" class="drag-list" :key="index">
</li> {{item.content}}
</ul> </div>
</transition-group>
</draggable>
</div> </div>
<div class="drag-box-item"> <div class="drag-box-item">
<div class="item-title">done</div> <div class="item-title">done</div>
<ul id="done" class="item-ul"> <draggable v-model="done" @remove="removeHandle" :options="dragOptions">
<li v-for="(item, index) in done" :key="index" class="drag-list" :data-index="index"> <transition-group tag="div" id="done" class="item-ul">
{{ item.content }} <div v-for="(item,index) in done" class="drag-list" :key="index">
</li> {{item.content}}
</ul> </div>
</transition-group>
</draggable>
</div> </div>
</div> </div>
</div> </div>
@ -37,10 +43,15 @@
</template> </template>
<script> <script>
import Sortable from 'sortablejs'; import draggable from 'vuedraggable'
export default { export default {
data() { data() {
return { return {
dragOptions:{
animation: 120,
group: 'sortlist',
ghostClass: 'ghost-style'
},
todo: [ todo: [
{ {
content: '开发图表组件' content: '开发图表组件'
@ -73,58 +84,17 @@
{ {
content: '开发项目整体框架' content: '开发项目整体框架'
} }
], ]
dragElement: null,
lock: true,
} }
}, },
components:{
draggable
},
methods: { methods: {
initSortable(id, vm){ removeHandle(event){
let list = document.getElementById(id); console.log(event);
Sortable.create(list, { this.$message.success(`${event.from.id} 移动到 ${event.to.id} `);
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');
}
}
});
} }
},
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);
} }
} }
@ -170,9 +140,6 @@
-webkit-transition: border .3s ease-in; -webkit-transition: border .3s ease-in;
transition: border .3s ease-in; transition: border .3s ease-in;
} }
.drag-list[draggable="false"]{
display: none;
}
.drag-list:hover { .drag-list:hover {
border: 1px solid #20a0ff; border: 1px solid #20a0ff;
} }
@ -183,4 +150,9 @@
font-size: 22px; font-size: 22px;
color: #1f2f3d; color: #1f2f3d;
} }
.ghost-style{
display: block;
color: transparent;
border-style: dashed
}
</style> </style>

View File

@ -2,7 +2,7 @@
<div class="table"> <div class="table">
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item> <el-breadcrumb-item><i class="el-icon-tickets"></i> 表格</el-breadcrumb-item>
<el-breadcrumb-item>VueDatasource</el-breadcrumb-item> <el-breadcrumb-item>VueDatasource</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>

View File

@ -31,7 +31,7 @@ export default new Router({
component: resolve => require(['../components/page/BaseForm.vue'], resolve) component: resolve => require(['../components/page/BaseForm.vue'], resolve)
}, },
{ {
// Vue-Quill-Editor组件 // 富文本编辑器组件
path: '/editor', path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve) component: resolve => require(['../components/page/VueEditor.vue'], resolve)
}, },
@ -41,7 +41,7 @@ export default new Router({
component: resolve => require(['../components/page/Markdown.vue'], resolve) component: resolve => require(['../components/page/Markdown.vue'], resolve)
}, },
{ {
// Vue-Core-Image-Upload组件 // 图片上传组件
path: '/upload', path: '/upload',
component: resolve => require(['../components/page/Upload.vue'], resolve) component: resolve => require(['../components/page/Upload.vue'], resolve)
}, },