jqueryUI的sortable实现div拖拽排序

原创于 2013-02-22 10:48:21 发布 · 3k 阅读

CC 4.0 BY-SA版权

文章标签：

11 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍如何利用jQuery UI的sortable方法实现div元素的拖拽排序功能。首先需要引入jQuery UI库，然后通过HTML创建包含多个a标签的div容器，并在JavaScript中设置sortable选项，如指定可拖动的元素及拖拽完成后的回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在看了众多的基于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事件来实现拖拽排序完成后触发的事件，通过后台的操作保存排序结果。