ion-reorder-group
属性的项的包装组件是reorder组
ion-reorder
组件。看到
ion-reorder-group
.
一旦用户拖动项目并将其放入新位置,
ionItemReorder
事件分派。的处理程序应该被实现
完成()
方法。
的
细节
财产的财产
ionItemReorder
事件包含有关重新排序操作的所有相关信息,包括
从
和
来
索引。在重新排序的上下文中,项目会移动
从
一个索引
来
一个新的索引。
使用
<!——重排手势默认禁用,启用它拖放项目——>
<
ion-reorder-group
(ionItemReorder)
=
"
doReorder(事件)
"
禁用
=
"
假
"
>
<!——默认重新排序图标,结束对齐的项目——>
<
ion-item
>
<
ion-label
>
第1项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第2项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<!——默认重新排序图标,开始对齐项目——>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第3项
ion-label
>
ion-item
>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第4项
ion-label
>
ion-item
>
<!——自定义重新排序图标结束项目——>
<
ion-item
>
<
ion-label
>
第5项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第6项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<!——物品重新排序,整个物品可以被拖拽——>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第7项
ion-label
>
ion-item
>
ion-reorder
>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第8项
ion-label
>
ion-item
>
ion-reorder
>
ion-reorder-group
>
复制
复制
进口
{
组件
,
ViewChild
}
从
“@angular /核心”
;
进口
{
IonreorderGroup.
}
从
“@betway东盟体育appionic /角”
;
进口
{
ItemReorderEventDetail
}
从
“@betway东盟体育appionic /核心”
;
@
组件
(
{
选择器
:
“reorder-group-example”
,
TemplateURL.
:
'reorder-group-example.html'
,
样式堡垒
:
[
'./reorder-group-example.css'
]
}
)
出口
类
ReorderGroupExample
{
@
ViewChild
(
IonreorderGroup.
)
reorderGroup
:
IonreorderGroup.
;
构造函数
(
)
{
}
doReorder
(
电动汽车
:
CustomEvent
<
ItemReorderEventDetail
>
)
{
// ' from '和' to '属性包含项目的索引
//拖动开始和结束的时间
安慰
.
日志
(
“从指数”
,
电动汽车
.
细节
.
从
,
”到“
,
电动汽车
.
细节
.
来
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。这个方法也可以直接调用
//通过reorder组
电动汽车
.
细节
.
完整的
(
)
;
}
toggleReorderGroup
(
)
{
这
.
reorderGroup
.
禁用
=
!
这
.
reorderGroup
.
禁用
;
}
}
复制
复制
更新数据
进口
{
组件
,
ViewChild
}
从
“@angular /核心”
;
进口
{
IonreorderGroup.
}
从
“@betway东盟体育appionic /角”
;
进口
{
ItemReorderEventDetail
}
从
“@betway东盟体育appionic /核心”
;
@
组件
(
{
选择器
:
“reorder-group-example”
,
TemplateURL.
:
'reorder-group-example.html'
,
样式堡垒
:
[
'./reorder-group-example.css'
]
}
)
出口
类
ReorderGroupExample
{
项目
=
[
1
,
2
,
3.
,
4
,
5
]
;
@
ViewChild
(
IonreorderGroup.
)
reorderGroup
:
IonreorderGroup.
;
构造函数
(
)
{
}
doReorder
(
电动汽车
:
CustomEvent
<
ItemReorderEventDetail
>
)
{
//在complete被调用之前,它们将保留在
//拖动前的顺序
安慰
.
日志
(
'完成之前'
,
这
.
项目
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。将items变量更新为
//项目的新顺序
这
.
项目
=
电动汽车
.
细节
.
完整的
(
这
.
项目
)
;
//当complete被调用后,项目将按新的顺序排列
安慰
.
日志
(
完成后的
,
这
.
项目
)
;
}
}
复制
复制
<!——重排手势默认禁用,启用它拖放项目——>
<
ion-reorder-group
禁用
=
"
假
"
>
<!——默认重新排序图标,结束对齐的项目——>
<
ion-item
>
<
ion-label
>
第1项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第2项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<!——默认重新排序图标,开始对齐项目——>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第3项
ion-label
>
ion-item
>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第4项
ion-label
>
ion-item
>
<!——自定义重新排序图标结束项目——>
<
ion-item
>
<
ion-label
>
第5项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第6项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<!——物品重新排序,整个物品可以被拖拽——>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第7项
ion-label
>
ion-item
>
ion-reorder
>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第8项
ion-label
>
ion-item
>
ion-reorder
>
ion-reorder-group
>
复制
复制
常量
reorderGroup
=
文档
.
querySelector
(
“ion-reorder-group”
)
;
reorderGroup
.
addEventListener
(
“ionItemReorder”
,
(
{
细节
}
)
=>
{
// ' from '和' to '属性包含项目的索引
//拖动开始和结束的时间
安慰
.
日志
(
“从指数”
,
细节
.
从
,
”到“
,
细节
.
来
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。这个方法也可以直接调用
//通过reorder组
细节
.
完整的
(
)
;
}
)
;
复制
复制
更新数据
常量
项目
=
[
1
,
2
,
3.
,
4
,
5
]
;
常量
reorderGroup
=
文档
.
querySelector
(
“ion-reorder-group”
)
;
reorderGroup
.
addEventListener
(
“ionItemReorder”
,
(
{
细节
}
)
=>
{
//在complete被调用之前,它们将保留在
//拖动前的顺序
安慰
.
日志
(
'完成之前'
,
项目
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。将items变量更新为
//项目的新顺序
项目
=
细节
.
完整的
(
项目
)
;
//当complete被调用后,项目将按新的顺序排列
安慰
.
日志
(
完成后的
,
项目
)
;
}
)
;
复制
复制
进口
反应
从
“反应”
;
进口
{
IonItem
,
IonLabel
,
IonReorder
,
IonreorderGroup.
,
betway东盟体育app离子
,
IonContent
}
从
“@betway东盟体育appionic /反应”
;
进口
{
ItemReorderEventDetail
}
从
“@betway东盟体育appionic /核心”
;
进口
{
披萨
}
从
“betway东盟体育appionicons /图标”
;
函数
doReorder
(
事件
:
CustomEvent
<
ItemReorderEventDetail
>
)
{
// ' from '和' to '属性包含项目的索引
//拖动开始和结束的时间
安慰
.
日志
(
“从指数”
,
事件
.
细节
.
从
,
”到“
,
事件
.
细节
.
来
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。这个方法也可以直接调用
//通过reorder组
事件
.
细节
.
完整的
(
)
;
}
export const ReorderGroupExample: React。Fc = () => (
<
IonContent
>
{
/*——reorder手势默认禁用,启用它拖放项目——*/
}
<
IonreorderGroup.
禁用
=
{
假
}
onIonItemReorder
=
{
doReorder
}
>
{
/*——默认重排序图标,结束对齐的项目——*/
}
<
IonItem
>
<
IonLabel
>
第1项
IonLabel
>
<
IonReorder
投币口
=
"
结束
"
/>
IonItem
>
<
IonItem
>
<
IonLabel
>
第2项
IonLabel
>
<
IonReorder
投币口
=
"
结束
"
/>
IonItem
>
{
/*——默认重新排序图标,开始对齐的项目——*/
}
<
IonItem
>
<
IonReorder
投币口
=
"
开始
"
/>
<
IonLabel
>
第3项
IonLabel
>
IonItem
>
<
IonItem
>
<
IonReorder
投币口
=
"
开始
"
/>
<
IonLabel
>
第4项
IonLabel
>
IonItem
>
{
/*——自定义重排序图标结束项——*/
}
<
IonItem
>
<
IonLabel
>
第5项
IonLabel
>
<
IonReorder
投币口
=
"
结束
"
>
<
betway东盟体育app离子
图标
=
{
披萨
}
/>
IonReorder
>
IonItem
>
<
IonItem
>
<
IonLabel
>
第6项
IonLabel
>
<
IonReorder
投币口
=
"
结束
"
>
<
betway东盟体育app离子
图标
=
{
披萨
}
/>
IonReorder
>
IonItem
>
{
/*——物品被重新排序,整个物品可以被拖动——*/
}
<
IonReorder
>
<
IonItem
>
<
IonLabel
>
第7项
IonLabel
>
IonItem
>
IonReorder
>
<
IonReorder
>
<
IonItem
>
<
IonLabel
>
第8项
IonLabel
>
IonItem
>
IonReorder
>
IonreorderGroup.
>
IonContent
>
);
复制
复制
更新数据
常量
项目
=
[
1
,
2
,
3.
,
4
,
5
]
;
函数
doReorder
(
事件
:
CustomEvent
)
{
//在complete被调用之前,它们将保留在
//拖动前的顺序
安慰
.
日志
(
'完成之前'
,
这
.
项目
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。将items变量更新为
//项目的新顺序
这
.
项目
=
事件
.
细节
.
完整的
(
这
.
项目
)
;
//当complete被调用后,项目将按新的顺序排列
安慰
.
日志
(
完成后的
,
这
.
项目
)
;
}
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“reorder-group-example”
,
styleUrl
:
'重新排序-room-example.css'
}
)
出口
类
ReorderGroupExample
{
doReorder
(
电动汽车
:
任何
)
{
// ' from '和' to '属性包含项目的索引
//拖动开始和结束的时间
安慰
.
日志
(
“从指数”
,
电动汽车
.
细节
.
从
,
”到“
,
电动汽车
.
细节
.
来
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。这个方法也可以直接调用
//通过reorder组
电动汽车
.
细节
.
完整的
(
)
;
}
使成为
(
)
{
返回
[
// reorder手势在默认情况下是禁用的,启用它来拖放项目
<
ion-reorder-group
onIonItemReorder
=
{
(
电动汽车
)
=>
这
.
doReorder
(
电动汽车
)
}
禁用
=
{
假
}
>
{
/*默认重新排序图标,结束对齐的项目*/
}
<
ion-item
>
<
ion-label
>
第1项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第2项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
{
/ *默认重新排序图标,开始对齐项* /
}
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第3项
ion-label
>
ion-item
>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第4项
ion-label
>
ion-item
>
{
/*自定义重新排序图标结束项*/
}
<
ion-item
>
<
ion-label
>
第5项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第6项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
{
/*重新排序后,整个项目可以被拖拽*/
}
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第7项
ion-label
>
ion-item
>
ion-reorder
>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第8项
ion-label
>
ion-item
>
ion-reorder
>
ion-reorder-group
>
]
}
}
复制
复制
更新数据
进口
{
组件
,
状态
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“reorder-group-example”
,
styleUrl
:
'重新排序-room-example.css'
}
)
出口
类
ReorderGroupExample
{
@
状态
(
)
项目
=
[
1
,
2
,
3.
,
4
,
5
]
;
doReorder
(
电动汽车
:
任何
)
{
//在complete被调用之前,它们将保留在
//拖动前的顺序
安慰
.
日志
(
'完成之前'
,
这
.
项目
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。将items变量更新为
//项目的新顺序
这
.
项目
=
电动汽车
.
细节
.
完整的
(
这
.
项目
)
;
//当complete被调用后,项目将按新的顺序排列
安慰
.
日志
(
完成后的
,
这
.
项目
)
;
}
使成为
(
)
{
返回
[
// reorder手势在默认情况下是禁用的,启用它来拖放项目
<
ion-reorder-group
onIonItemReorder
=
{
(
电动汽车
)
=>
这
.
doReorder
(
电动汽车
)
}
禁用
=
{
假
}
>
{
这
.
项目
.
地图
(
项
=>
<
ion-item
>
<
ion-label
>
项
{
项
}
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
)
}
ion-reorder-group
>
]
}
}
复制
复制
<
模板
>
<!——重排手势默认禁用,启用它拖放项目——>
<
ion-reorder-group
@ionItemReorder
=
"
doReorder(事件)
"
禁用
=
"
假
"
>
<!——默认重新排序图标,结束对齐的项目——>
<
ion-item
>
<
ion-label
>
第1项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第2项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
ion-reorder
>
ion-item
>
<!——默认重新排序图标,开始对齐项目——>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第3项
ion-label
>
ion-item
>
<
ion-item
>
<
ion-reorder
投币口
=
"
开始
"
>
ion-reorder
>
<
ion-label
>
第4项
ion-label
>
ion-item
>
<!——自定义重新排序图标结束项目——>
<
ion-item
>
<
ion-label
>
第5项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<
ion-item
>
<
ion-label
>
第6项
ion-label
>
<
ion-reorder
投币口
=
"
结束
"
>
<
ion-icon
的名字
=
"
披萨
"
>
ion-icon
>
ion-reorder
>
ion-item
>
<!——物品重新排序,整个物品可以被拖拽——>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第7项
ion-label
>
ion-item
>
ion-reorder
>
<
ion-reorder
>
<
ion-item
>
<
ion-label
>
第8项
ion-label
>
ion-item
>
ion-reorder
>
ion-reorder-group
>
模板
>
<
脚本
>
进口
{
betway东盟体育app离子
,
IonItem
,
IonLabel
,
IonReorder
,
IonreorderGroup.
}
从
“@betway东盟体育appionic / vue”
;
进口
{
披萨
}
从
“betway东盟体育appionicons /图标”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
betway东盟体育app离子
,
IonItem
,
IonLabel
,
IonReorder
,
IonreorderGroup.
}
,
设置
(
)
{
常量
doReorder
=
(
事件
:
CustomEvent
)
=>
{
// ' from '和' to '属性包含项目的索引
//拖动开始和结束的时间
安慰
.
日志
(
“从指数”
,
事件
.
细节
.
从
,
”到“
,
事件
.
细节
.
来
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。这个方法也可以直接调用
//通过reorder组
事件
.
细节
.
完整的
(
)
;
}
返回
{
doReorder
,
披萨
}
}
}
)
;
脚本
>
复制
复制
更新数据
<
脚本
>
...
进口
{
defineComponent
,
裁判
}
从
“vue”
;
出口
默认的
defineComponent
(
{
...
设置
(
)
{
常量
项目
=
裁判
(
[
1
,
2
,
3.
,
4
,
5
]
)
;
常量
doReorder
=
(
事件
:
CustomEvent
)
=>
{
//在complete被调用之前,它们将保留在
//拖动前的顺序
安慰
.
日志
(
'完成之前'
,
项目
.
价值
)
;
//完成重新订购并将项目放在DOM中的项目
//手势结束的位置。将items变量更新为
//项目的新顺序
项目
.
价值
=
事件
.
细节
.
完整的
(
项目
.
价值
)
;
//当complete被调用后,项目将按新的顺序排列
安慰
.
日志
(
完成后的
,
项目
.
价值
)
;
}
返回
{
doReorder
,
项目
,
...
}
}
}
)
;
脚本
>
复制
复制
属性
禁用 |
|
---|---|
描述 |
如果 |
属性 |
禁用 |
类型 |
布尔基 |
默认的 |
真的 |
事件
的名字 | 描述 |
---|---|
ionItemReorder |
需要听取以便完成重新排序操作的事件。发出事件后,需要调用“完成()”方法以便最终确定重新排序操作。 |
方法
完整的 |
|
---|---|
描述 |
完成重新排序操作。必须由 如果传递了一个项目列表,则该列表将被重新排序并以适当的顺序返回。 如果没有参数或者如果 |
签名 |
完成(listOrReorder吗?:布尔基|任何[]|undefined) => Promise |