html拖拽排序,常用组件
分类:高并发

dragsort html拖拽排序,dragsort拖拽排序

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

  图片 1

  我们使用到的只有里面的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>示例</h1>     
 23     <script type="text/javascript">
 24         $("ul:first").dragsort();
 25     </script>
 26     
 27     <h2>可以在两个分组直接进行拖拽</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             else
105                 alert("保存失败");
106         }
107     });
108 } 
109 </script> 
110 </body>
111 </html>

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

  2、效果如下。

图片 2

  示例下载:下载 。

html拖拽排序,dragsort拖拽排序 一、Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序。由于自己实现比较困难...

Nodejs+Express-实现文件上传下载管理的网站

前段组件

项目Github地址(对你有帮助记得给星哟):

Jquery.validate
  1. 通常可以使用jquery.validate.js的插件进行前端数据的校验。具有一定的局限性,只适合有form表单提交数据。
    $("#indexForm").validate({
    rules: {
    user_test1: {
    required: true,
    }
    },
    messages: {
    user_test1: {
    required: "验证插件",
    }
    }
    });

5.5.2 Jquery.cookie

  1. jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。依赖于jquery.js。cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。cookie数据存放在客户的浏览器上,session数据放在服务器上。单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

  2. 使用建议:将登陆信息等重要信息存放为SESSION;其他信息如果需要保留,可以放在COOKIE中。

  3. 使用方法。
    (1)读取cookie值
    $.cookie(cookieName)  cookieName:要读取的cookie名称。
    示例:$.cookie("username");读取保存在cookie中名为的username的值。
    (2)写入设置Cookie值
    $.cookie(cookieName,cookieValue);  
    cookieName:要设置的cookie名称,cookieValue表示相对应的值。
    示例:$.cookie("username","admin");
    $.cookie("username",NULL);销毁名称为username的cookie
    (3) [option]参数说明:
    Expires:有限日期,可以是一个整数或一个日期(单位:天)。这个地方也要注意,如果不设置这个东西,浏览器关闭之后此cookie就失效了。
    Path:cookie值保存的路径,默认与创建页路径一致。
    Domin:cookie域名属性,默认与创建页域名一样。  这个地方要相当注意,跨域的概念,如果要主域名二级域名有效则要设置  ".xxx.com"
    Secrue:一个布尔值,表示传输cookie值时,是否需要一个安全协议。
    创建cookie实例: $.cookie("useuName", $("#useuName").val(), { path: "/", expiress: 7 ,sucue:true})

5.5.3 Jquery-mobile
5.5.4 bootstrap
5.5.5 Jquery-jqGrid

  1. 最新版本:

5.5.6 Bootstrap-datepicker
Bootstrap日期时间选择器(Bootstrap DateTime Picker)是一个Bootstrap组件,能够简化页面上日期、时间的输入。
5.5.7 Bootstrap-select
Bootstrap-select多选下拉框实现
5.5.8 Bootstrap-smoke
Smoke jQuery插件件适于Bootstrap 3版的前端框架,主要是扩展了BOOTSTRAP 3目前没有的功能,而且效果很不错。Smoke 插件新增加效果有:表单验证 浮动提示框 流行的页面加载进度条效果 全屏效果 Panel面板增加全屏、最小化和关闭功能 Helpers功能(获取当前数值、URL、日期)
5.5.9 Raty评分

  1. 参考文档:https://github.com/wbotelhos/raty

5.5.10 Zoom放大镜

  1. 下载地址

5.5.11 Ztree

  1. 树组件。

5.5.12 Layer

  1. web弹层组件,主要用于页面信息提示的弹出框。
  2. 官网地址:http://layer.layui.com/和http://www.layui.com/下载包。
  3. 引入layer.js文件(依赖于jquery文件)

前段的各种组件。
5.5.13 WebUploader

  1. 图片上传组件。
  2. 引入相应的js和CSS文件。(webuploader.css、jquery.js、webuploader.js)
  3. 分片、并发,预览、压缩,多途径添加文件夹(文件多选,拖拽等)妙传。
  4. 创建相应的页面。
    <body>

    <div id="upload">
    <div id="filePicker">文件上传</div>
    </div>

    <script type="text/javascript">
    var uploader = WebUploader.create(
    {
    swf:"${pageContext.request.contextPath }/js/Uploader.swf",
    server:"${pageContext.request.contextPath }/FileUploadServlet",
    pick:"#filePicker",
    auto:true
    }
    );
    </script>
    </body>

5.5.14 Underscore.js

  1. 提供了许多作为开发者的我们在开发 Web 项目所需要的实用功能。
  2. 引入对于的js文件。()
  3. .isEmpty({});.flatten([[0, 1], [2, 3], [4, 5]]); _.range(5);
  4. _.each:写看得懂的循环
  5. _.template: 简单直白
  6. _.filter():只需要一个布尔函数
    5.5.15 Hcharts
  7. 官网:https://www.hcharts.cn/
  8. 图表制作。
    5.5.16 Echarts
  9. 官网:http://echarts.baidu.com/
  10. 图表功能的制作。
  11. 官方网址:
    5.5.17 Vue(Iview)
  12. 最新版本:Vue2.5
  13. 官网:https://cn.vuejs.org
  14. Github下载:https://github.com/iview/iview
    1. JavaScript和html进行分离书写,必须将外部引入的JavaScript文件放到DOM页面的后面。
  15. 整合iview前端组件的使用。使用iview中的组件时,注意标签的书写格式。
    5.5.18 Iview
  16. 最新版本:
  17. 官网:https://www.iviewui.com/

5.5.19 Angular

  1. 最新版本:

后端:基于nodejs的express的web框架.

前端:bootstrap框架+vuejs、jquery等js库

功能点:

  • dronzone.js实现文件拖拽上传、下载,可自定义传输容量。
  • vuejs实现表格双向数据绑定。
  • jquery.form.min.js表单插件,升级表单,实现表单提交回调。
  • 纯css+jQuery实现一键返回顶部。
  • 简单的ajax异步刷新。

项目结构总览:

app/:典型的MVC架构,其下包含模型(models),视图(views),控制器(controller),不过此处没有用到models层,完全是试图与控制器进行数据的交互。前端页面用jade前端模板引擎编写,因为jade可以很好的支持页面的模块化,套用bootstrap前端框架。

config/:应用的配置目录,包括静态目录的配置,数据库的配置等,不多说。

freedom/:其下有两个字子目录(hidden/和upload/),其中hidden/目录存放文件上传后存放的目录位置。

node_modules/:项目依赖的nodejs第三方模块,不多说。

public/:存放静态文件的目录(css文件,js文件,图片)。

 图片 3

详细功能点描述:

1、左侧导航栏选中背景加深

这部分实现是简单粗暴,借助jQuery选择器遍历id为main-name下面的li标签当li标签的子标签a的href属性等于当前页面的href时,首先去除兄弟li标签的active类,再添加当前li标签的class为active。

在某些情况下,也可以通过给a标签绑定点击事件,当发生点击事件时,设置li标签的class为active,但是此时a标签中带有超链接,点击之后,固然可以将li标签的class的active,但是随即页面发生跳转,页面再次被刷新,效果消失。因此,通过jQuery改变页面效果仅当前页面有效,一旦页面刷新,便不再有效。

局部代码:

图片 4

2、文件列表实现

后台:

通过fs模块的readdirSync同步函数读取freedom/upload/目录下的所有文件名,再根据文件名遍历文件每个文件的详细信息,此处调用fs模块的statSync同步函数。

局部代码:

图片 5

重要的信息有累计毫秒数(valueOf()获取),文件名,文件大小,文件最近改变时间(ctime)。最后在调用Array.sort()根据累计毫秒数降序排序。注意sort此时需要传入自定义排序规则的回调函数。

图片 6

 

前端:

前端列表以jade模板引擎和vuejs相结合,v-for指令遍历从后端发送过来的列表数据列表,由于vuejs天生支持MVVC模式,视图与数据模型的双向数据绑定变得自然而然。删除分别通过v-on指令绑定两个点击事件。

前端列表局部代码:

图片 7

vue实例代码:

图片 8

其中fileDelete()f方法通过post的方式发送数据到后端,后端响应最新的文件列表数据回来,进而更新model层的数据,由于model层数据与视图通过view-model层联系实现绑定,文件列表内容的改变会直接反映到网页上,实现局部更新的效果。准确的讲,这里虽然实现了双向绑定,实际上只用到了model向view方向的单项绑定。

fileDownload()方法则直接一文件名作为一个参数,拼接一个url,重定到该url,后端更具该url调用下载方法即可。

 删除和下载的后台代码:

图片 9

图片 10

3、文件拖拽上传

前端:

图片 11

实现文件拖拽的效果借助于一个前端插件dronzone.js实现,从前端层面看来,本质上与表单上传并无差异,都可以通过psot方法发送数据。

图片 12

绑定一个上传成功后的回调函数,函数中通过post想后台请求最新的文件列表数据,更新vue实例的data属性,view层通过数据绑定实现数据局部更新效果。

后端:

后端通过psot方法接受数据,并通过multiparty第三方模块接解析数据,将前端发送过里的文件以一个随即字符串作为文件名存放在freedom/upload/目录下,在调用fs的renameSync方法更改为正确的文件名,最后记得调用res.end()结束传输连接,否则前端页面一直处于等待状态。

图片 13

 4、白板复制粘贴的功能

前端:

直接在表单中嵌入一个textarea标签,给按钮绑定点击事件实现提交,通过post方法向后端发送文本数据,提交成功后通过Jquery实现局部异步刷新提交的内容,显示在页面上。此处抛弃form默认的提交功能,因为默认的提交动作不能实现提交回调操作,自定义带有异步回调的submit动作。

局部代码:

图片 14

异步回调的submit有多重实现方式

方式一:通过jquery.form.min.js插件实现

图片 15

方式二:DIY实现

图片 16

但是此处有点不好地方在与,js代码与html代码存在耦合,通过vuejs来重构可以实现两者的解耦。

提交后台代码:

图片 17

同时为了动态增加textarea空间的功能,增加一个按钮,并绑定点击事件,通过jQuery实现。

图片 18

5、一键返回顶部功能

图片 19

图片 20

存css实现+jquery实现,

通过Jquery改变css属性,控制器是否显示,鼠标滑过时的背景颜色变化,以及点击时返回顶部的动作。

图片 21

 

完:转载请注明出处,谢谢!

本文由10bet手机官网发布于高并发,转载请注明出处:html拖拽排序,常用组件

上一篇:css选择器学习笔记,打破畏惧感 下一篇:css如何实现未知宽高div中图片垂直水平居中效果,jQuery实现的div垂直水平居中实例代码
猜你喜欢
热门排行
精彩图文