'使用vuedraggable代替sortablejs'
parent
aa01f3b5dd
commit
a143deae45
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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)
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue