哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个

cookie结合JS的小案例哦!

话不多说直接上代码:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#drag {

				width: 200px;

				height: 200px;

				text-align: center;

				line-height: 200px;

				background: greenyellow;

				position: absolute;

				top: 0;

				left: 0;

				cursor: pointer;

			}

		</style>

	</head>

	<body>

		<div id="drag">我竟然Σ(っ°Д°;)っ被拖走了!</div>

	</body>

	<script>

		function addCookie(name, value, iDay) {

			var oDate = new Date();

			oDate.setDate(oDate.getDate() + iDay);

			document.cookie = name + '=' + value + '; path=/; expires=' + oDate;

		}

		//页面加载的时候调用getCookie方法

		//获取cookie

		function getCookie(name) {

			var arr = document.cookie.split('; ');

			for(var i = 0; i < arr.length; i++) {

				var arr2 = arr[i].split('=');

				return(arr2[0] == name) && arr2[1]

			}

			return '';

		}

		window.onload = function() {

			var oDiv = document.getElementById('drag');

			drag(oDiv);

			var move_by = getCookie('move_cood');

			if(move_by) {

				var str = eval('(' + move_by + ')');

				//移动时重新得到物体的距离

				oDiv.style.left = str[0] + 'px';

				oDiv.style.top = str[1] + 'px';

			}

			function drag(obj) {

				//鼠标落下

				obj.onmousedown = function(ev) {

					var oEvent = ev || event; //解决兼容

					var disX = oEvent.clientX - obj.offsetLeft,

						disY = oEvent.clientY - obj.offsetTop;

					//鼠标移动

					document.onmousemove = function(ev) {

						var oEvent = ev || event;

						//获取鼠标点击屏幕时的那个点，然后减去被拖拽物体距离左边的一个距离

						obj.style.left = oEvent.clientX - disX + 'px';

						obj.style.top = oEvent.clientY - disY + 'px';

					};

					//鼠标抬起

					document.onmouseup = function() {

						document.onmousemove = null; //当鼠标弹起时不再移动

						document.onmouseup = null; //预防鼠标放上去的时候还会移动

						//releaseCapture 鼠标的捕获和释放

						obj.releaseCapture && obj.releaseCapture();

						//通过addCookie方法，把物体拖动停止的位置存在了cookie里面

						addCookie('move_cood', '[' + obj.offsetLeft + ',' + obj.offsetTop + ']', 10);

					};

					//捕获鼠标

					obj.setCapture && obj.setCapture();

					//阻止选中文字

					return false;

				};

			}

		};

	</script>

</html>

　　就是这样滴!!!你学会了吗???

cookie结合js 实现记住的拖拽的更多相关文章

  1. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  3. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  4. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  5. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  6. JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  7. 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  8. 原生js实现模块来回拖拽效果

    代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

  9. JS 弹出框拖拽

    css代码 body { margin:; text-align: center; } .box { display: none; background-color: #fff !important; ...

随机推荐

  1. Supreme(ง •̀_•́)ง

    1.数学: 4月底18讲看完. 5月书上重点习题再过一遍(注证明题,最值,平均值,有界,介值,零点定理,等式不等式,极限,中值定理(费马,罗尔,拉格朗日,泰勒,柯西,一元积分中值定理,二重积分中值定理 ...

  2. 【算法笔记】B1045 快速排序

    1045 快速排序 (25 分)   著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后 ...

  3. 使用python uiautomation从钉钉网页版提取公司所有联系人信息

    之前写了一个提取QQ群里所有人信息的脚本 https://www.cnblogs.com/Yinkaisheng/p/5114932.html 今天写一个从钉钉网页版提取公司所有人通讯录的脚本,,本脚 ...

  4. Scrapy——settings配置文件

    # -*- coding: utf-8 -*- # Scrapy settings for tencent project # # For simplicity, this file contains ...

  5. ajax session timeout

    授权过期后AJAX操作跳转到登录页的一种全局处理方式 菜鸟程序员之Asp.net MVC Session过期异常的处理 基于WebImage的图片上传工具类

  6. Full Text Search 实现Sort的实现方案

    CREATE TABLE dbo.pageStore( ID int NOT NULL, StoreName varchar(50) NULL, OwnerOccupation varchar(50) ...

  7. JavaEE_XMind总结

    1 Servlet 2 ServletContext 3 HttpServletResponse 4 HttpServletResquest 5 Cookie

  8. 使用jsp完成商品列表的动态显示

    1数据库准备工作 1创建数据库 2 创建product表 代码如下: CREATE TABLE `product` ( `pid` ) NOT NULL, `pname` ) DEFAULT NULL ...

  9. 九度oj题目1341：艾薇儿的演唱会

    题目1341:艾薇儿的演唱会(40分) 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:522 解决:237 题目描述: 艾薇儿今天来到了中国,她计划两天后在哈尔滨举行一场个人的演唱会.由于 ...

  10. 游戏场景下的DDoS风险分析及防护

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯游戏云资深架构师 vince 本篇文章主要是分享游戏业务面临的安全风险场景,以及基于这些场景的特点,我们应该如何做好对应的防护. ...