搜索文档 /

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 需要听取以便完成重新排序操作的事件。发出事件后,需要调用“完成()”方法以便最终确定重新排序操作。

方法

完整的

描述

完成重新排序操作。必须由ionItemReorder事件。

如果传递了一个项目列表,则该列表将被重新排序并以适当的顺序返回。

如果没有参数或者如果真的时,重新排序将完成,项目将保持在它被拖到的位置。如果,则重新排序将完成,项目将反弹回原来的位置。

签名 完成(listOrReorder吗?:布尔基|任何[]|undefined) => Promise
Baidu