dragsort html拖拽排序_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

dragsort html拖拽排序_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

一、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 <!DOCTYPE html>  2 <html>  3 <head>  4     <title>拖拽示例</title>  5     <meta charset="utf-8" />  6     <style type="text/css">  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     </style> 17     <script type="text/javascript" src="jquery-2.1.3.min.js"></script> 18     <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script> 19 </head> 20 <body> 21      22     <h1 id="示例">示例</h1>      23     <script type="text/javascript"> 24         $("ul:first").dragsort(); 25     </script> 26      27     <h2 id="可以在两个分组直接进行拖拽">可以在两个分组直接进行拖拽</h2> 28      29     <ul id="list2" class="draglist"  data-groupid="gid-2"> 30         <li data-id="10" data-groupid="gid-2"><div>10</div></li> 31         <li data-id="11" data-groupid="gid-2"><div>11</div></li> 32         <li data-id="12" data-groupid="gid-2"><div>12</div></li> 33         <li data-id="13" data-groupid="gid-2"><div>13</div></li> 34         <li data-id="14" data-groupid="gid-2"><div>14</div></li> 35         <li data-id="15" data-groupid="gid-2"><div>15</div></li> 36         <li data-id="16" data-groupid="gid-2"><div>16</div></li> 37         <li data-id="17" data-groupid="gid-2"><div>17</div></li> 38         <li data-id="18" data-groupid="gid-2"><div>18</div></li> 39     </ul> 40     <input name="sortorder" id ="gid-2" type="hidden" value="10,11,12,13,14,15,16,17,18" /> 41      42     <ul id="list1" class="draglist" data-groupid="gid-1"> 43         <li data-id="1" data-groupid="gid-1"><div>1</div></li> 44         <li data-id="2" data-groupid="gid-1"><div>2</div></li> 45         <li data-id="3" data-groupid="gid-1"><div>3</div></li> 46         <li data-id="4" data-groupid="gid-1"><div>4</div></li> 47         <li data-id="5" data-groupid="gid-1"><div>5</div></li> 48         <li data-id="6" data-groupid="gid-1"><div>6</div></li> 49         <li data-id="7" data-groupid="gid-1"><div>7</div></li> 50         <li data-id="8" data-groupid="gid-1"><div>8</div></li> 51         <li data-id="9" data-groupid="gid-1"><div>9</div></li> 52     </ul> 53     <input name="sortorder" id ="gid-1" type="hidden" value="1,2,3,4,5,6,7,8,9"/> 54     <div style="clear:both;"></div> 55 <script type="text/javascript"> 56     $(".draglist").dragsort({ 57     dragSelector: "li", 58     dragBetween: true, 59     dragEnd: saveOrder, //拖拽完成后回调函数 60     placeHolderTemplate: "<li class='placeHolder'><div></div></li>" //拖动是阴影 61 }); 62  63 function saveOrder() { 64     var $this = $(this); 65     var data = $this.parent().children().map(function() { 66         return $this.attr("data-id"); 67     }).get(); 68  69     var currentid = $this.attr("data-id"); //组件id 70     var oldgroupid = $this.attr("data-groupid"); //所属组id 71     var groupid = $this.parent().attr("data-groupid"); //目标组id 72  73     //跨组移动、移除旧组信息 74     if (oldgroupid != groupid) { 75         var oldgroup = $("#" + oldgroupid); 76         var groupval = oldgroup.val().replace(currentid, ""); 77         oldgroup.val(groupval); 78     } 79  80     $("#" + groupid).val(data.join(",")); //添加所属组记录 81     $this.attr("data-groupid", groupid); //改变所属组id   82 }; 83  84 /** 85  * 保存位置 86  */ 87 function savePosition() { 88     var inputs = $("input[name='sortorder']"); 89     var arr = new Array(); 90     //构造数据 91     inputs.each(function() { 92         var $this = $(this); 93         arr.push($this.attr("id") + "-" + $this.val()); 94     }); 95      96     $.ajax({ 97         url: "${ctx}/test/position.json", 98         type: "POST", 99         data: { "tiles": arr },100         dataType: "json",101         success: function(data) {102             if (data.flag)  103                 alert("保存成功");104             else105                 alert("保存失败");106         }107     });108 } 109 </script> 110 </body>111 </html>

　　其中两个input的值为li的id（以","连接），id值的顺序标识当前分组li的排列顺序。跨组拖动的时候两个input中的值会随之改变。从而达到跨组移动的效果。需要保存的时候，直接使用ajax将两个input的值进行提交，后台解析数据保存到数据库即可。

　　2、效果如下。

　　示例下载：下载。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles