原生js通过prottype写的一个简单拖拽

<!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title> <style> .box{ position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:0px;top:0px;left:20px; /*修饰*/ border-radius:50%;box-shadow:…

Javascript写的一个可拖拽排序的列表

自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档末尾并通过设置绝对定位让它出现在同样的位置,而原本在它后面的项则会因为它脱离文档而自动填充空位,当鼠标松开时通过鼠标的位置计算出当前位置处于列表的第几项,让后再将克隆项插入到该项之前. 完整代码:演示 css: #main { width: 500px; margin:; padding:; bac…

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&…

原生js及H5模拟鼠标点击拖拽

一.原生js 1.拖拽的流程动作鼠标按下触发onmousedown事件鼠标移动触发onmousemove事件鼠标松开触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限制div移动的横纵坐标: 防止火狐的bug, 要在最后写上return false,阻止默认事件: 防止鼠标运动时移出div,所以要用document.onmousemove和document.onmouseup,不能用oDiv.onmousemove; 3.代码实现: html: <div id=…

原生JS取代一些JQuery方法的简单实现

原生JS取代一些JQuery方法的简单实现下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySele…

原生JS中apply()方法的一个值得注意的用法

今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { "length": 5, "0": 'eat', "1": 'play' });//得到ary = ['eat', 'play', undefined*3] 在这个用法中,apply的第一个参数为null,第二个参数是一个包含length字段的对象,查了…

只是一个用EF写的一个简单的分页方法而已

只是一个用EF写的一个简单的分页方法而已慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesForUserInfos(int pageSize, int pageIndex, out int total) { DataModelContainer db = new DataModelContainer(); total = db.UserInfo.Count(); )).Skip(pageSize).As…

写了一个简单的CGI Server

之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看,对于学生来说,拿来当简历,含金量还是足够的.如果把程序里所涉及的HTTP协议,Linux下POSIX编程等等搞清楚,我想找工作中肯定是有足够的竞争力的,当然我也只是皮毛而已,不再班门弄斧了,下面简单的说下程序流程吧,方便小伙伴们阅读. 程序源代码:戳我在说程序流程之前,我先简单说下CGI吧,CG…

自己写的一个简单PHP采集器

自己写的一个简单PHP采集器 <?php //**************************************************************** $url = "http://book.sina.com.cn/nzt/lit/zhuxian2/index.shtml";// 图书地址 $ver = "old"; //新旧版本 //***************************************************…

写了一个简单可用的IOC

根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免陷入细节中.学习过程最大的收获,框架也是人写的,没学过感觉很神秘高端.现在看来大概率是,未知往往觉得是高不可攀.http://naotu.baidu.com/file/6c3da879a4495b6bd369f71dcb726f05?token=ed8c0d49d4ee7bbd…

写了一个简单的 Mybatis

写了一个简单的 Mybatis,取名 SimpleMybatis . 具备增删改查的基本功能,后续还要添加剩下的基本数据类型和Java集合类型的处理. 脑图中有完整的源码和测试的地址 http://naotu.baidu.com/file/83c5554e23156ce6be2a3349889cc0d4?token=a6081a1bc0fffc95…

(Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动,一定需要脱离标准文档流,所以我们给它使用绝对定位. 2.利用视觉欺骗,点击鼠标悬浮的其实是利用JS生成的一个Div,交换信息的两个Div并没有位置交换,只是把双方属性进行了交换. 3.利用了勾股定理去判断距离. ##效果图如下: 网页源代码: <!DOCTYPE html> <html&g…

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料还有就是发掘到的比较牛逼的一篇博客:http:/…

JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应…

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzone 的一个演示示例. 选定的文件并没有真正上传.) 新闻我刚刚发布 Dropzone v4.0.0! 它已经完全重新设计, 并已更新的网站. 非常感谢 1910 设计新的 logo 和网站. 它看起来非常棒. 看看他们的工作! 我在 COLORGLARE 上最新的文章: Stop writi…

移动端多个DIV简单拖拽功能

移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端多个DIV拖拽</title> <style> * { padding: 0; margin: 0; } .container { hei…

Node.js基于Express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本,因为express因为版本的不同使用的方式也不同,我这算是目前最新的了吧还没有装express的可以移步到这里看看express框架的获取安装 1.简单地项目初始化进入你的nodejs安装路径下边,如图,然后执行命令 express -e test (这里把项目名设置为test…

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><…

利用HttpClient写的一个简单页面获取

之前就听说过利用网络爬虫来获取页面,感觉还挺有意思的,要是能进行一下偏好搜索岂不是可以满足一下窥探欲. 后来从一本书上看到用HttpClient来爬取页面,虽然也有源码,但是也没说用的HttpClient是哪个版本的,而且HttpClient版本不一样,导致后面很多类也不一样.于是下载了最新的HttpCient版本,并且对着tutorial和网上的文档试着写一个简单的获取页面的例子,最终证明是可行的,但是也遇到了不少问题,而且这个例子也十分简单. import java.io.IOExcepti…

今天写了一个简单的新浪新闻RSS操作类库

今天,有位群友问我如何获新浪新闻列表相关问题,我想,用正则表达式网页中取显然既复杂又不一定准确,现在许多大型网站都有RSS集合,所以我就跟他说用RSS应该好办一些. 一年前我写过一个RSS阅读器,不过,打新浪相关的XML文件看了一下,发现RSS2.0 和一年前的不大一样了,但具体怎么处理,几句话也很难讲得清楚,所以,我干脆写了一个类库给他,直接调用. 类库不是很复杂,主要两个功能: 一.通过新浪的根频道XML在把所有频道的信息读出来,使用递归连同子节点也读取出来. 二.指定频道URL的XML文件…

cJSON: 一个用c写的一个简单好用的JSON解析器

转自:http://blog.csdn.net/chenzhongjing/article/details/9188347 下载地址: http://sourceforge.net/projects/cjson/files/?source=navbar 实例1: 创建一个简单的学生信息数组 cJSON* pRoot = cJSON_CreateObject(); cJSON* pArray = cJSON_CreateArray(); cJSON_AddItemToObject(pRoot, "…

jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>原生Js结合html5做出放大镜的效果</title> <style> img{ margin:100px 500px; } div{ width:200px; height:200px; display:none; border:1px so…

基于Spring aop写的一个简单的耗时监控

前言:毕业后应该有一两年没有好好的更新博客了,回头看看自己这一年,似乎少了太多的沉淀了.让自己做一个爱分享的人,好的知识点拿出来和大家一起分享,一起学习. 背景: 在做项目的时候,大家肯定都遇到对一些对方法,模块耗时的监控,为了方便性能的监控,问题的定位等.如果每一个方法里都加上 ... Stopwatch watch = Stopwatch.createStarted(); ... watch.elapsed(TimeUnit.MILLISECONDS) ... 类似的代码肯定没问题,但是就会…

jQuery跳转到另一个页面以及原生js跳转到另一个页面

1.原生js我们可以利用http的重定向来跳转 window.location.replace("https://www.cnblogs.com/pythonywy/"); 2.原生js使用href来跳转 window.location.href = "https://www.cnblogs.com/pythonywy/"; 3.使用jQuery的属性替换方法 3.1 $(location).attr('href', 'https://www.cnblogs.com…

js插件-简单拖拽

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g…

JS组件系列——Bootstrap Table 表格行拖拽

前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(…

[javascript]一种兼容性比较好的简单拖拽

作为一个马上要找工作.非计算机专业.热爱前端的大四狗,最近开始疯狂写demo.看书,准备九.十月份的校招. 晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文记录下~大神求轻喷面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl…

Unity UGUI 实现简单拖拽功能

说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( … ); 这个方法可以把屏幕坐标转换成 ugui 坐标.这里我们只需要知道 UI 的坐标和鼠标的坐标是不一样的,他…

002-DOM事件实例-实现一个可以拖拽的登陆窗口

前言:这是跟着慕课网一个老师的视频做的,这几天在重新的梳理自己,写完这个例子要系统的学一下jQuery,我司现在用的还是比较多,毕竟用了它不用考虑IE兼容性,可以让开发更有效率. 1.项目需求及基本的HTML和CSS 相信大家都用过QQ登陆框,它可以在页面中任意的拖拽,然后点击状态可以切换各种状态.首先做出HTML的结构 <div class="loginPanel" id="loginPanel">  <di…

WPF简单拖拽功能实现

1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指针会变成拖放图标. ③用户释放鼠标键时,元素接收信息并决定如何处理接收到的信息.在没有释放鼠标键时,可按下Esc键取消该操作. 3.Demo 下面实例是一个界面中分上下两个Label.当鼠标点击并拖拽上方Label到下方时,下方Label显示上方Label的内容. XAML代码: <Window x…

【原生js通过prottype写的一个简单拖拽】的更多相关文章