ul li 拖动排序jquery-ui.js

快乐向日葵

浏览: 500300 次
性别:
来自: 杭州

最近访客更多访客>>

logcy

dbwfncxz

xiaolan02

masuweng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端开发-javascript

<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { cursor: move;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();       
      });
    </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>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 15</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 16</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 17</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 18</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 19</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 20</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 21</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 22</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 23</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 24</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 25</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 26</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 27</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 28</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 29</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 30</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 31</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 32</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 33</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 34</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 35</li>
    </ul>
  </body>
</html>

官方网站+在线演示：http://jqueryui.com/sortable/

分享到：

html css float left与 float right的使用 ... | table tr 拖动排序插件jquery.tablednd.js

2013-07-30 15:40
浏览 1662
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ul li 拖动排序jquery-ui.js

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ul li 拖动排序jquery-ui.js

评论

发表评论

相关推荐

回调函数实例

jquery完全遮盖+弹出框

table tr 拖动排序插件jquery.tablednd.js

可移动弹出层

[转]jquery的checked以及disabled

javascript实现图片轮换效果

js动态加载css文本

MathJax+MathML

js中使用正则表达式实现replaceAll方法

js控制onclick事件实例

判断iframe是否加载完毕的方法（兼容ie和Firefox）(转)

颜色搭配器

浮动图片 广告图片 示例

经常会遇到这样一种情况。 在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到i

iframe载入完成时的事件监听

屏蔽键盘及鼠标相关代码

iframe+js实现页面全屏、淡入淡出切换

iframe 父窗口和子窗口相互的调用方法集锦

js判断浏览器类型

如何遍历一个未知的object类型的属性（转）

最近访客更多访客>>

浮动图片广告图片示例

经常会遇到这样一种情况。在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到i