dragsorthtml拖拽排序_html/css_WEB-ITnose

一、Jquery List DragSort
　　对于有些页面，如首页的定制，需要进行动态的拖拽排序。由于自己实现比较困难，我们一般会使用一些js插件来实现。dragsort 就是帮助我们完成这一需求。通过dragsort我们可以很方便地对html页面上的素动态地推拽，进行排序。dragsort是一个jquery插件，我们使用起来非常方便。dragsort网站为：dragsort下载地址为：http://dragsort.codeplex.com/ 。
下载dragsort之后，解压如下图所示，

　　

　　我们使用到的只有里面的jquery.dragsort-0.5.2.js这个文件，也可以使用压缩版的min.js。
二、实例
　　1、使用
　　将jquery.dragsort-0.5.2.js，与jquery-2.1.3.min.js拷贝到同一个文件夹，新建html页面。引入这两个js文件。注意jquery在dragsort上面引入。相关代码如下：

  1    2    3    4      拖拽示例   5        6        7         body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; }  8         h1 { font-size:16pt; }  9         h2 { font-size:13pt; } 10         ul { margin:0px; padding:0px; margin-left:20px; } 11         #list1, #list2 { width:350px; list-style-type:none; margin:0px; } 12         #list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; } 13         #list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; } 14         #list2 { float:right; } 15         .placeHolder div { background-color:white !important; border:dashed 1px gray !important; } 16       17        18        19   20   21      22     
示例
      23       24         $("ul:first").dragsort(); 25       26      27     
可以在两个分组直接进行拖拽
 28      29       30          
10

      
查看更多关于dragsorthtml拖拽排序_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110796