ion-reorder
Reorder 是一个组件，它允许将项目拖动以更改其在一组项目中的顺序。它必须在 reorder group 中使用，以提供可视化的拖放界面。
🌐 Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a reorder group to provide a visual drag and drop interface.
重新排序是用于拖放项目的锚点。一旦重新排序完成，ionReorderEnd 事件将从重新排序组中分派，并且需要调用 complete 方法。
🌐 The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the ionReorderEnd event will be dispatched from the reorder group and the complete method needs to be called.
基本用法
🌐 Basic Usage
重新排序的最基本示例是在一个项目内部进行插槽操作。默认情况下，重新排序功能对重新排序组是禁用的。可以通过在重新排序组上设置 disabled 属性为 false 来启用该功能。然后可以使用重新排序图标拖放项目并重新排序它们。
🌐 The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the disabled property on the reorder group to false. The reorder icon can then be used to drag and drop the items and reorder them.
ConsoleConsole messages will appear here when logged from the example above.切换重新排序
🌐 Toggling Reorder
在某些情况下，可能希望能够选择切换重新排序功能。这可以通过基于函数或变量使 disabled 属性具有响应性来实现。
🌐 In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the disabled property reactive, based on a function or variable.
ConsoleConsole messages will appear here when logged from the example above.自定义重新排序图标
🌐 Custom Reorder Icon
重新排序组件在 iOS 上使用三条线的重新排序图标，在 Material Design 上使用两条线。可以通过在重新排序组件中添加任何可用的 Ionicons 的 Icon 组件来自定义此图标。
🌐 The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an Icon component inside of the reorder with any of the available Ionicons.
ConsoleConsole messages will appear here when logged from the example above.重新排序封装
🌐 Reorder Wrapper
重新排序也可以用作项目的封装器，使项目本身成为锚点。点击下面的任何项目并拖动它以重新排序列表。
🌐 Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.
ConsoleConsole messages will appear here when logged from the example above.更新数据
🌐 Updating Data
当在无参数的情况下调用重排组上的 complete 方法时，DOM 节点将会被重新排序。如果这些项目是从需要排序的数据数组渲染的，这可能会导致数据与 DOM 不同步。
🌐 When the complete method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync.
为了在重新排序完成后对数组进行排序，应该将数组作为参数传递给 complete 方法。complete 方法将对数组进行排序并返回，以便可以重新赋值。请注意，传递数组将防止 Ionic 重新排序 DOM 节点。
🌐 In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the complete method. The complete method will sort the array and return it so it can be reassigned. Note that passing the array will prevent Ionic from reordering the DOM nodes.
在某些情况下，应用可能需要自行重新排序数组和 DOM 节点。如果需要这样做，应将 false 作为参数传递给 complete 方法。这将防止 Ionic 重新排序重排组中的任何 DOM 节点。
🌐 In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, false should be passed as a parameter to the complete method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
无论采用哪种方法，如果在循环中提供了项目，都应该提供一个稳定的标识用于重新排序项目。这意味着在 Angular 中使用 track，在 React 和 Vue 中使用 key。
🌐 Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using track for Angular, and key for React and Vue.
ConsoleConsole messages will appear here when logged from the example above.事件处理
🌐 Event Handling
使用 ionReorderStart 和 ionReorderEnd
🌐 Using ionReorderStart and ionReorderEnd
ionReorderStart 事件在用户开始重新排序手势时触发。当用户点击并按住某个项目，但尚未发生任何移动时，此事件会被触发。这对于为重新排序操作准备用户界面非常有用，例如隐藏某些元素或更新项目的视觉状态。例如，在列表项目被拖动时可以隐藏图标，并在重新排序完成后再次显示。
🌐 The ionReorderStart event is emitted when the user begins a reorder gesture. This event fires when the user taps and holds an item, before any movement occurs. This is useful for preparing the UI for the reorder operation, such as hiding certain elements or updating the visual state of items. For example, icons in list items can be hidden while they are being dragged and shown again when the reorder is complete.
ionReorderEnd 事件在用户完成重新排序手势时触发。当用 户释放正在拖动的项目时，就会发生此事件，例如在触摸屏上抬起手指或释放鼠标按钮。该事件包含项目的 from 和 to 索引，以及应调用的 complete 方法以完成重新排序操作。from 索引始终是手势开始时项目的位置，而 to 索引将是其最终位置。即使没有项目位置发生变化，此事件也会触发，在这种情况下，from 和 to 索引将相同。
🌐 The ionReorderEnd event is emitted when the user completes the reorder gesture. This occurs when the user releases the item they are dragging, for example by lifting their finger on a touch screen or releasing the mouse button. The event includes the from and to indices of the item, as well as the complete method that should be called to finalize the reorder operation. The from index will always be the position of the item when the gesture started, while the to index will be its final position. This event will fire even if no items have changed position, in which case the from and to indices will be the same.
ConsoleConsole messages will appear here when logged from the example above.使用 ionReorderMove
🌐 Using ionReorderMove
ionReorderMove 事件会在用户拖动项目进行重新排序手势时持续触发。该事件包括项目的 from 和 to 索引。与 ionReorderEnd 不同，该事件中的 from 索引表示项目的最后已知位置（随着项目移动而更新），而 to 索引表示其当前位置。如果项目自上次事件以来未改变位置，from 和 to 索引将相同。此事件对于跟踪拖动操作中的位置变化非常有用。例如，在项目被拖动时，可以实时更新其排名或编号，以保持逻辑上的升序。
🌐 The ionReorderMove event is emitted continuously during the reorder gesture as the user drags an item. The event includes the from and to indices of the item. Unlike ionReorderEnd, the from index in this event represents the last known position of the item (which updates as the item moves), while the to index represents its current position. If the item has not changed position since the last event, the from and to indices will be the same. This event is useful for tracking position changes during the drag operation. For example, the ranking or numbering of items can be updated in real-time as they are being dragged to maintain a logical ascending order.
不要在 ionReorderMove 事件期间调用 complete 方法，因为这可能会破坏手势。
ConsoleConsole messages will appear here when logged from the example above.与虚拟滚动一起使用
🌐 Usage with Virtual Scroll
重新排序需要一个滚动容器才能正常工作。使用虚拟滚动解决方案时，需要提供一个自定义滚动目标。需要禁用内容的滚动，并且必须将 .ion-content-scroll-host 类添加到负责滚动的元素上。
🌐 Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.
ConsoleConsole messages will appear here when logged from the example above.属性
🌐 Properties
No properties available for this component.
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
| Name | Description |
|---|---|
icon | The icon of the reorder handle (uses ion-icon). |
CSS 自定义属性
🌐 CSS Custom Properties
No CSS custom properties available for this component.
插槽
🌐 Slots
No slots available for this component.