您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQueryUi > 正文

jquery ui Interactions Sortable排序

2013-12-12 11:12:46 作者:天外飞仙 人气:2511 Views

jquery ui Interactions Sortable排序
jquery ui Interactions Sortable排序
排序的列表中的元素或网格使用鼠标。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"/><title>jquery ui Interactions Sortable排序</title><meta name="keywords" content="jquery,jquery博客,jquery吧,jquery插件,jquery 特效,jquery 教程,jquery 效果,jquery ui,前端开发,web前端,web前端开发,天外飞仙,前端资源,html+CSS,JavaScript,html5,css3,css,css学习,css教程,浏览器兼容,php" /><meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发" /><link rel="shortcut icon" href="http://www.jqueryba.com/favicon.ico" type="image/x-icon"/><link rel="profile" href="http://gmpg.org/xfn/11" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.jqueryba.com/rss/" /> <link rel="stylesheet" href="http://www.jqueryba.com/jqueryui/jquery-ui.css"> <script src="http://www.jqueryba.com/jqueryui/jquery-1.9.1.js"></script> <script src="http://www.jqueryba.com/jqueryui/jquery-ui.js"></script> <link rel="stylesheet" href="http://www.jqueryba.com/jqueryui/style.css"> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script></head><body><ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li></ul></body></html>

使一批DOM元素被排序。单击并拖动一个元素在列表中一个新的地方,和其他项目将调整一起。

jQuery吧的在线效果DEMO

链接:http://www.jqueryba.com/1638.html(转载时请注明本文出处及文章链接)
分类:jQueryUi
标签:,

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!