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

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. Linux基本结构

    Linux 的基本目录结构:     基本介绍:      Linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录“/”,然后再次目录下载创建其他的目录. 经典的一句话:linu ...

  2. SimpleITK学习（二）图像读取

    通常我会用simpleitk来读取dicom文件,主要是为了将dicom文件转换为numpy矩阵,便于输入神经网络,读取dicom文件可分为两种情况,一.单独的dicom文件 二.一系列dicom文件 ...

  3. python之类与对象（1）

    面向对象编程是最有效的软件编写方法之一.编写类时,定义一群对象都有的通用行为.基于类创建对象时,每个对象都自动具备这种通用行为,然后可以根据需要赋予每个对象的独特的个性. 1. 类与对象的语法规范 关 ...

  4. PHP输出毫秒时间戳

    代码: <?php list($msec, $sec) = explode(' ', microtime()); $msectime = (float)sprintf('%.0f', (floa ...

  5. U盘拷贝大文件提示文件过大无法拷贝解决方案

    工具: 计算机 windows操作系统 U盘 原因:由于U盘的格式问题导致的,当期的磁盘格式是FAT32类型的,无拷贝过大的文件 方法:接下来修改U盘类型,且不格式化U盘 1.键盘win+R快捷键弹出 ...

  6. Android可见APP的不可见任务栈（TaskRecord）销毁分析

    Android依托Java型虚拟机,OOM是经常遇到的问题,那么在快达到OOM的时候,系统难道不能回收部分界面来达到缩减开支的目的码?在系统内存不足的情况下,可以通过AMS及LowMemoryKill ...

  7. SPRING中的线程池ThreadPoolTaskExecutor（转）

    转自:https://blog.csdn.net/zhanglongfei_test/article/details/51888433 一.初始化 1,直接调用 ThreadPoolTaskExecu ...

  8. proxy的作用

    get() get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象.属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选. get方法的用法,上文已 ...

  9. (转)Linux服务器SNMP常用OID

    原文:https://www.haiyun.me/archives/linux-snmp-oid.html 收集整理一些Linux下snmp常用的OID,用做服务器监控很不错.服务器负载: 1 2 3 ...

  10. Oracle 通过数据字典查询系统信息

    简介:数据字典记录了数据库系统的信息,他是只读表和视图的集合,数据字典的所有者是sys用户.注:用户只能在数据字典上执行查询操作,而维护和修改是由系统自己完成的. 1.数据字典的组成:数据字典包括数据 ...