cookie结合js 实现记住的拖拽

Posted ITandYT

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cookie结合js 实现记住的拖拽相关的知识，希望对你有一定的参考价值。

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

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 实现记住的拖拽的主要内容，如果未能解决你的问题，请参考以下文章

js 实现简单的拖拽

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

js拖拽效果的原理及实现

THREE.js如何实现在x,y,z轴上的拖拽

js实现鼠标的拖拽效果

拖拽系列利用JS面向对象OOP思想实现拖拽封装