低代码高性能原生UI框架Drag 拖拽排序
组件类型：UxDragComponentPublicInstance、UxDragItemComponentPublicInstance
支持列表式、宫格式拖动排序。仅支持 ux-drag-item 作为子项
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
UxDragComponentPublicInstance
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | String | id | 唯一索引名称 (默认 id) |
| list | UTSJSONObject[] | - | 数据列表 |
| col | Number | 1 | 列数 >2则宫格排序 |
| height | Number | 45 | 单项高度 |
UxDragItemComponentPublicInstance
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | String | - | 唯一索引 |
| order | Number | - | 排序下标 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 拖拽完成时触发 | Function(event: UTSJSONObject[]) |
| start | 拖拽开始时触发 | Function() |
| end | 拖拽结束时触发 | Function() |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll :disabled="disabled">
<ux-card direction="column" icon="flag" title="拖拽排序" :bold="true">
<ux-text text="支持列表式、宫格式拖动排序"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="拖拽排序" text="https://www.uxframe.cn/component/func/drag.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="列表式" :bold="true">
<ux-text text="支持单列拖动排序" :mb="15"></ux-text>
<ux-drag name="id" :list="list1" @start="disabled = true" @end="disabled = false" @change="change1">
<ux-drag-item :id="item['id']" :order="index" v-for="(item,index) in list1" :key="index">
<ux-cell style="width: 100%;flex:1;">
<template v-slot:left>
<ux-image :width="30" :height="30" :radius="5" :src="item['url']"></ux-image>
<ux-text :ml="10" :bold="true" :size="15" :text="item['id']"></ux-text>
</template>
<template v-slot:right>
<ux-icon type="more"></ux-icon>
</template>
</ux-cell>
</ux-drag-item>
</ux-drag>
</ux-card>
<ux-card direction="column" icon="arrowright" title="宫格式" :bold="true">
<ux-text text="支持宫格式拖动排序" :mb="15"></ux-text>
<ux-drag name="sort" :list="list2" :col="3" @start="disabled = true" @end="disabled = false" @change="change2">
<ux-drag-item :id="item['sort']" :order="index" v-for="(item,index) in list2" :key="index">
<view class="grid">
<ux-text :bold="true" :size="15" color="black" :text="item['sort']"></ux-text>
</view>
</ux-drag-item>
</ux-drag>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll :disabled="disabled">
<ux-card direction="column" icon="flag" title="拖拽排序" :bold="true">
<ux-text text="支持列表式、宫格式拖动排序"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="拖拽排序" text="https://www.uxframe.cn/component/func/drag.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="列表式" :bold="true">
<ux-text text="支持单列拖动排序" :mb="15"></ux-text>
<ux-drag name="id" :list="list1" @start="disabled = true" @end="disabled = false" @change="change1">
<ux-drag-item :id="item['id']" :order="index" v-for="(item,index) in list1" :key="index">
<ux-cell style="width: 100%;flex:1;">
<template v-slot:left>
<ux-image :width="30" :height="30" :radius="5" :src="item['url']"></ux-image>
<ux-text :ml="10" :bold="true" :size="15" :text="item['id']"></ux-text>
</template>
<template v-slot:right>
<ux-icon type="more"></ux-icon>
</template>
</ux-cell>
</ux-drag-item>
</ux-drag>
</ux-card>
<ux-card direction="column" icon="arrowright" title="宫格式" :bold="true">
<ux-text text="支持宫格式拖动排序" :mb="15"></ux-text>
<ux-drag name="sort" :list="list2" :col="3" @start="disabled = true" @end="disabled = false" @change="change2">
<ux-drag-item :id="item['sort']" :order="index" v-for="(item,index) in list2" :key="index">
<view class="grid">
<ux-text :bold="true" :size="15" color="black" :text="item['sort']"></ux-text>
</view>
</ux-drag-item>
</ux-drag>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
const disabled = ref(false)
const list1 = ref<UTSJSONObject[]>([
{id: '0', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '1', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '2', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '3', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '4', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
] as UTSJSONObject[])
const list2 = ref<UTSJSONObject[]>([
{sort: '0'},
{sort: '1'},
{sort: '2'},
{sort: '3'},
{sort: '4'},
{sort: '5'},
{sort: '6'},
{sort: '7'},
{sort: '8'},
] as UTSJSONObject[])
function change1(e : UTSJSONObject[]) {
console.log(e);
}
function change2(e : UTSJSONObject[]) {
console.log(e);
}
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
const disabled = ref(false)
const list1 = ref<UTSJSONObject[]>([
{id: '0', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '1', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '2', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '3', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
{id: '4', url: 'https://via.placeholder.com/200x200.png/f0f0f0' },
] as UTSJSONObject[])
const list2 = ref<UTSJSONObject[]>([
{sort: '0'},
{sort: '1'},
{sort: '2'},
{sort: '3'},
{sort: '4'},
{sort: '5'},
{sort: '6'},
{sort: '7'},
{sort: '8'},
] as UTSJSONObject[])
function change1(e : UTSJSONObject[]) {
console.log(e);
}
function change2(e : UTSJSONObject[]) {
console.log(e);
}
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
.title {
width: 100%;
padding: 10px;
font-size: 28rpx;
}
.grid {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
margin: 2px;
}
</style><style lang="scss">
.title {
width: 100%;
padding: 10px;
font-size: 28rpx;
}
.grid {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
margin: 2px;
}
</style>