可排序 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>