github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

拖动排序

old_v2.1.0
lin-xin 2017-07-12 15:25:37 +08:00
parent 47d1d4eaea
commit 56b37afd5e
1 changed files with 104 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/page/DragList.vue
View File

@ -6,7 +6,7 @@
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="drag-box-left"> <div class="drag-box-left">
<div class="drag-title">未完成</div> <div class="drag-title">拖动排序</div>
<div class="drag-list" draggable="true" <div class="drag-list" draggable="true"
v-for="list in data1" v-for="list in data1"
:data-id="list.id" :data-id="list.id"
@ -17,19 +17,6 @@
@dragover="dragoverEvent" @dragover="dragoverEvent"
>{{list.title}}</div> >{{list.title}}</div>
</div> </div>
<div class="drag-box-right">
<div class="drag-title">已完成</div>
<div class="drag-list" draggable="true"
v-for="list in data2"
:data-id="list.id"
@dragstart="dragstartEvent"
@dragend="dragendEvent"
@dragenter="dragenterEvent"
@dragleave="dragleaveEvent"
@dragover="dragoverEvent"
>{{list.title}}</div>
</div>
</section> </section>
</template> </template>
@ -101,7 +88,7 @@
} }
.drag-list{ .drag-list{
border: 1px solid #ddd; border: 1px solid #ddd;
padding:20px; padding:10px;
margin-bottom: 20px; margin-bottom: 20px;
transition: border .3s; transition: border .3s;
} }
@ -110,7 +97,7 @@
} }
.drag-title{ .drag-title{
font-weight: 400; font-weight: 400;
line-height: 50px; line-height: 25px;
margin: 10px 0; margin: 10px 0;
font-size: 22px; font-size: 22px;
color: #1f2f3d; color: #1f2f3d;