可排序的 Svelte 組件
可排序不是一個獨立的組件，而只是使用 <List> 和 <ListItem> 組件的特殊情況。
可排序事件
| 事件 | 說明 |
|---|---|
| <List> 事件 當 sortable 屬性啟用時，以下事件將出現在 <List> 上 | |
| sortableEnable | 當可排序模式啟用時觸發事件 |
| sortableDisable | 當可排序模式停用時觸發事件 |
| sortableSort | 當使用者在新的位置釋放目前排序的元素後觸發事件。第一個處理函式引數包含一個物件，其中包含 `from`、`to` 和 `el` 屬性，這些屬性分別有已排序清單項目開始/新的索引號碼和已排序清單項目的 HTML 元素 |
| sortableMove | 在排序期間每個清單項目移動時觸發事件 |
範例
sortable.svelte
<script>
import {
Navbar,
Page,
Block,
List,
ListItem,
NavRight,
Link,
BlockTitle,
} from 'framework7-svelte';
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<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">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="2 John Doe" after="Director">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="3 John Doe" after="Developer">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="4 Aaron Darling" after="Manager">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="5 Calvin Johnson" after="Accounter">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="6 John Smith" after="SEO">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="7 Chloe" after="Manager">
<i class="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">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="2 John Doe" after="Director">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="3 John Doe" after="Developer">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="4 Aaron Darling" after="Manager">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="5 Calvin Johnson" after="Accounter">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="6 John Smith" after="SEO">
<i class="icon icon-f7" slot="media" />
</ListItem>
<ListItem title="7 Chloe" after="Manager">
<i class="icon icon-f7" slot="media" />
</ListItem>
</List>
</Page>