'使用vuedraggable代替sortablejs'
lin-xin
parent
aa01f3b5dd
commit
a143deae45
|
|
@ -14,13 +14,13 @@
|
|||
"babel-polyfill": "^6.23.0",
|
||||
"element-ui": "2.3.3",
|
||||
"mavon-editor": "^2.5.2",
|
||||
"sortablejs": "^1.7.0",
|
||||
"vue": "^2.5.16",
|
||||
"vue-core-image-upload": "2.1.11",
|
||||
"vue-datasource": "1.0.12",
|
||||
"vue-quill-editor": "3.0.6",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-schart": "^0.1.4"
|
||||
"vue-schart": "^0.1.4",
|
||||
"vuedraggable": "^2.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
|
|
|||
|
|
@ -9,27 +9,33 @@
|
|||
<div class="drag-box">
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">todo</div>
|
||||
<ul id="todo" class="item-ul">
|
||||
<li v-for="(item, index) in todo" :key="index" class="drag-list" :data-index="index">
|
||||
{{ item.content }}
|
||||
</li>
|
||||
</ul>
|
||||
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
|
||||
<transition-group tag="div" id="todo" class="item-ul">
|
||||
<div v-for="(item,index) in todo" class="drag-list" :key="index">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">doing</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>
|
||||
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
|
||||
<transition-group tag="div" id="doing" class="item-ul">
|
||||
<div v-for="(item,index) in doing" class="drag-list" :key="index">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</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>
|
||||
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
|
||||
<transition-group tag="div" id="done" class="item-ul">
|
||||
<div v-for="(item,index) in done" class="drag-list" :key="index">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,10 +43,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Sortable from 'sortablejs';
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dragOptions:{
|
||||
animation: 120,
|
||||
group: 'sortlist',
|
||||
ghostClass: 'ghost-style'
|
||||
},
|
||||
todo: [
|
||||
{
|
||||
content: '开发图表组件'
|
||||
|
|
@ -73,58 +84,17 @@
|
|||
{
|
||||
content: '开发项目整体框架'
|
||||
}
|
||||
],
|
||||
dragElement: null,
|
||||
lock: true,
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
draggable
|
||||
},
|
||||
methods: {
|
||||
initSortable(id, vm){
|
||||
let list = document.getElementById(id);
|
||||
Sortable.create(list, {
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
removeHandle(event){
|
||||
console.log(event);
|
||||
this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
|
||||
}
|
||||
},
|
||||
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;
|
||||
transition: border .3s ease-in;
|
||||
}
|
||||
.drag-list[draggable="false"]{
|
||||
display: none;
|
||||
}
|
||||
.drag-list:hover {
|
||||
border: 1px solid #20a0ff;
|
||||
}
|
||||
|
|
@ -183,4 +150,9 @@
|
|||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.ghost-style{
|
||||
display: block;
|
||||
color: transparent;
|
||||
border-style: dashed
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="table">
|
||||
<div class="crumbs">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default new Router({
|
|||
component: resolve => require(['../components/page/BaseForm.vue'], resolve)
|
||||
},
|
||||
{
|
||||
// Vue-Quill-Editor组件
|
||||
// 富文本编辑器组件
|
||||
path: '/editor',
|
||||
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
|
||||
},
|
||||
|
|
@ -41,7 +41,7 @@ export default new Router({
|
|||
component: resolve => require(['../components/page/Markdown.vue'], resolve)
|
||||
},
|
||||
{
|
||||
// Vue-Core-Image-Upload组件
|
||||
// 图片上传组件
|
||||
path: '/upload',
|
||||
component: resolve => require(['../components/page/Upload.vue'], resolve)
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue