您的位置:首页 > Web前端 > JQuery

jqueryUI的sortable实现div拖拽排序

2013-02-22 10:48 148 查看
在看了众多的基于jquery的sort插件后,本以为所有的排序插件只能针对ul--li标签进行排序,在google了jquery sortable div排序关键词之后,终于找到了用sortable实现div拖拽排序的方法。

步骤一:引入jqueryUI.js文件。

步骤二:编写html代码,如下所示;

<div id="sortWrapper">
<a class="sortItem">one</a>
<a class="sortItem">two</a>
<a class="sortItem">three</a>
<a class="sortItem">four</a>
</div>
步骤三:在js文件中调用sortable()方法。
$('#sortWrapper').sortable({
items: 'sortItem',
stop:function(event, ui){
})
})
注意,这里的sortable选择器是外层的div,而items参数则是a标签,以此来实现div的拖拽排序。
再用stop事件来实现拖拽排序完成后触发的事件,通过后台的操作保存排序结果。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息