dragsort html拖拽排序_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 <!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、效果如下。
示例下载：下载 。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
