移动端安卓和IOS开发框架Framework7教程-可排序列表（Sortable List）

开启和关闭排序功能

在拥有可排序列表之后，我们需要某种方法来开启或者关闭排序功能。

通过HTML标签控制

可以通过在链接中设置特定的类和data属性来开启或者关闭排序功能：

1. <div ? class = "content-block" >
2. ???? <!--?我们在data-sortable属性中指定目标可排序列表?-->
3. ???? <p><a ? href = "#" ? data-sortable = ".sortable" ? class = "open-sortable" > Enable?sortable </a></p>
4. ???? <p><a ? href = "#" ? data-sortable = ".sortable" ? class = "close-sortable" > Disable?sortable </a></p>
5. ???? <p><a ? href = "#" ? data-sortable = ".sortable" ? class = "toggle-sortable" > Toggle?sortable </a></p>
6. </div>
7. <!--?可排序列表?-->
8. <div ? class = "list-block?sortable" >
9. ???? <ul>
10. ?????? <li>
11. ???????? <div ? class = "item-content" >
12. ?????????? <div ? class = "item-media" ><i ? class = "icon?icon-f7" ></i></div>
13. ?????????? <div ? class = "item-inner" >
14. ???????????? <div ? class = "item-title" > Item?1 </div>
15. ???????????? <div ? class = "item-after" > $10 </div>
16. ?????????? </div>
17. ???????? </div>
18. ???????? <!--?可排序句柄??-->
19. ???????? <div ? class = "sortable-handler" ></div>
20. ?????? </li>
21. ?????? <li>
22. ???????? <div ? class = "item-content" >
23. ?????????? <div ? class = "item-media" ><i ? class = "icon?icon-f7" ></i></div>
24. ?????????? <div ? class = "item-inner" >
25. ???????????? <div ? class = "item-title" > Item?2 </div>
26. ???????????? <div ? class = "item-after" > $20 </div>
27. ?????????? </div>
28. ???????? </div>
29. ???????? <div ? class = "sortable-handler" ></div>
30. ?????? </li>
31. ??????...
32. ???? </ul>
33. </div>

实例预览

通过JavaScript控制

可以通过恰当的App方法：

myApp.sortableOpen(sortableContainer) - 在指定的可排序列表开启排序功能

• sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。

myApp.sortableClose(sortableContainer) - 在指定的可排序列表关闭排序功能

• sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。

myApp.sortableToggle(sortableContainer) - 在指定的可排序列表切换（开启／关闭）排序功能

• sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。

1. <p><a ? href = "#" ? class = "open" > Enable?sortable </a></p>
2. <p><a ? href = "#" ? class = "close" > Disable?sortable </a></p>
3. <p><a ? href = "#" ? class = "toggle" > Toggle?sortable </a></p>

1. var ?myApp? = ? new ? Framework7 ();
2. ?
3. var ?$$? = ? Dom7 ;
4. ?
5. $$ ( ‘.open‘ ). on ( ‘click‘ , ? function ? () ? {
6. ??myApp . sortableOpen ( ‘.sortable‘ );
7. });
8. $$ ( ‘.close‘ ). on ( ‘click‘ , ? function ? () ? {
9. ??myApp . sortableClose ( ‘.sortable‘ );
10. });
11. $$ ( ‘.toggle‘ ). on ( ‘click‘ , ? function ? () ? {
12. ??myApp . sortableToggle ( ‘.sortable‘ );
13. });

实例预览

原文：http://zaixianshouce.iteye.com/blog/2305122