可排序 React 组件
可排序不是一个独立的组件，而是使用 <List> 和 <ListItem> 组件的特殊情况。
可排序事件
| 事件 | 描述 |
|---|---|
| <List> 事件 当 sortable 属性启用时，以下事件将在 <List> 上可用 | |
| sortableEnable | 当启用可排序模式时，将触发该事件 |
| sortableDisable | 当禁用可排序模式时，将触发该事件 |
| sortableSort | 当用户在新的位置释放当前排序元素后，将触发该事件。第一个处理程序参数包含一个对象，其中包含 from、to 和 el 属性，这些属性包含排序列表项的开始/新索引号和排序列表项的 HTML 元素 |
| sortableMove | 在排序期间，每次列表项移动时，都会触发该事件 |
示例
sortable.jsx
import React from 'react';
import {
Navbar,
Page,
Block,
List,
ListItem,
NavRight,
Link,
Icon,
BlockTitle,
} from 'framework7-react';
export default () => (
<Page>
<Navbar title="Sortable List">
<NavRight>
<Link sortableToggle=".sortable">Toggle</Link>
</NavRight>
</Navbar>
<Block>
<p>Just click "Toggle" button on navigation bar to enable/disable sorting</p>
</Block>
<List strongIos outlineIos dividersIos sortable>
<ListItem title="1 Jenna Smith" after="CEO">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="2 John Doe" after="Director">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="3 John Doe" after="Developer">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="4 Aaron Darling" after="Manager">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="5 Calvin Johnson" after="Accounter">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="6 John Smith" after="SEO">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="7 Chloe" after="Manager">
<Icon icon="icon-f7" slot="media" />
</ListItem>
</List>
<List strongIos outlineIos dividersIos mediaList sortable>
<ListItem
title="Yellow Submarine"
after="$15"
subtitle="Beatles"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
>
<img
slot="media"
src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
width="80"
/>
</ListItem>
<ListItem
title="Don't Stop Me Now"
after="$22"
subtitle="Queen"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
>
<img
slot="media"
src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
width="80"
/>
</ListItem>
<ListItem
title="Billie Jean"
after="$16"
subtitle="Michael Jackson"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
>
<img
slot="media"
src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
width="80"
/>
</ListItem>
</List>
<BlockTitle>Opposite Side</BlockTitle>
<List strongIos outlineIos dividersIos sortable sortableOpposite>
<ListItem title="1 Jenna Smith" after="CEO">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="2 John Doe" after="Director">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="3 John Doe" after="Developer">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="4 Aaron Darling" after="Manager">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="5 Calvin Johnson" after="Accounter">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="6 John Smith" after="SEO">
<Icon icon="icon-f7" slot="media" />
</ListItem>
<ListItem title="7 Chloe" after="Manager">
<Icon icon="icon-f7" slot="media" />
</ListItem>
</List>
</Page>
);