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事件来实现拖拽排序完成后触发的事件,通过后台的操作保存排序结果。
步骤一:引入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事件来实现拖拽排序完成后触发的事件,通过后台的操作保存排序结果。
相关文章推荐
- 使用knockout-sortable实现对自定义菜单的拖拽排序
- jquery实现仿JqueryUi可拖动的DIV实例
- 使用knockout-sortable实现对自定义菜单的拖拽排序
- 用jQuery.ui.sortable实现拖拽排序
- 用Jquery UI Sortable与数据库实现div拖动(类似iGoogle)
- jquery实现仿JqueryUi可拖动的DIV实例
- DIV+CSS实现模态锁屏对话框
- css实现两个div并排显示
- JQuery+div+css实现无限级联树
- 使用CSS样式 clear:both 实现div不并排
- div+css实现盖章
- DIV随滚动条滚动而滚动的实现代码【推荐】
- 用div代替textarea,实现在文本框中使用回车<br>和设置字体功能
- HTML CSS + DIV实现整体布局
- CSS在页面布局中实现div水平居中的方法总结(转)
- 不用flex布局实现并排的div等宽等高布局
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片(可实现多张图片上传和预览移除)
- 5种样式实现div容器中三图摆放实例对比说明
- JS轻松实现CSS设置,DIV+CSS常用CSS设置
- jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)