可排序的 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>
);