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 |