init
This commit is contained in:
weicw
214
src/views/extension/dragsort.vue
Normal file
214
src/views/extension/dragsort.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
v-model="list"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
v-model="grid"
|
||||
item-key="id"
|
||||
:animation="300">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable';
|
||||
import {MenuOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionDragSort',
|
||||
components: {
|
||||
draggable,
|
||||
MenuOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
],
|
||||
grid: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.demo-drag-list {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item {
|
||||
line-height: 1;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.demo-drag-list-item + .demo-drag-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
|
||||
.demo-drag-list-item .sort-handle {
|
||||
cursor: move;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/** 宫格样式 */
|
||||
.demo-drag-grid {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
padding: 16px 0 0 16px;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item {
|
||||
padding: 16px;
|
||||
margin: 0 16px 16px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user