Question

Ionic4项目中我们可以使用Ionic4排序组件ion-reorder对项目进行布局。

ion-reorder官方文档地址:https://ionicframework.com/docs/api/reorder

Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an ion-reorder-group to provide a visual drag and drop interface.

ion-reorder is the anchor used to drag and drop the items inside of the ion-reorder-group. See the Reorder Group for more information on how to complete the reorder operation.

ion-reorder　用法(Usage)

angularjavascriptreactvue

  
    Item 1
  
  



  
    Item 2
  
  




  
  
    Item 3
  



  
  
    Item 4
  




  
    Item 5
  
  
    
  



  
    Item 6
  
  
    
  




  
    
      Item 7
    
  



  
    
      Item 8
    
  
</ion-reorder>

  
    Item 1
  
  



  
    Item 2
  
  




  
  
    Item 3
  



  
  
    Item 4
  




  
    Item 5
  
  
    
  



  
    Item 6
  
  
    
  




  
    
      Item 7
    
  



  
    
      Item 8
    
  
</ion-reorder>

import React from 'react';

import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react';

const Example: React.SFC = () => (
  
    {/*-- Default reorder icon, end aligned items --*/}
    
      
        Item 1
      
      
    

    
      
        Item 2
      
      
    

    {/*-- Default reorder icon, start aligned items --*/}
    
      
      
        Item 3
      
    

    
      
      
        Item 4
      
    

    {/*-- Custom reorder icon end items --*/}
    
      
        Item 5
      
      
        
      
    

    
      
        Item 6
      
      
        
      
    

    {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
    
      
        
          Item 7
        
      
    

    
      
        
          Item 8
        
      
    
  
);

export default Example;

  
  
    
      Item 1
    
    
  

  
    
      Item 2
    
    
  

  
  
    
    
      Item 3
    
  

  
    
    
      Item 4
    
  

  
  
    
      Item 5
    
    
      
    
  

  
    
      Item 6
    
    
      
    
  

  
  
    
      
        Item 7
      
    
  

  
    
      
        Item 8
      
    
  
</template>