关键词：
哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个
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>
就是这样滴!!!你学会了吗???
通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽
...处理这些细节，经过翻阅jqueryui的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码/***[draggable拖拽方法]*@param{[type]}modal[移动元素]*@param 查看详情
js实现鼠标的拖拽效果
拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果这是我在慕课网上面看到的，我直接拿过来了，地址http://www.imooc.com/le... 查看详情
原生js实现弹出窗口的拖拽（直接copy可用）
上一篇说了一下弹出窗口功能的实现思路，一般情况下紧接着就会需要做到弹窗的移动，当然现在有很插件、库比如hammer可以使用，效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式，如下： 思路：... 查看详情
three.js如何实现在x,y,z轴上的拖拽
...谢谢就是类似于3Dmax里的那种模型的拖拽参考技术ATHREE.js实现在x,y,z轴上的拖拽需要用户注册拖拽控件。1、注册的js代码如下：varscript=document.createElement('script'); script.type='text/javascript'; &nb... 查看详情
three.js如何实现在x,y,z轴上的拖拽
...是如果我用THREE.js创建了一个模型，那该用什么代码才能实现像上述那样可以选取那个模型并且拖拽移动它呢参考技术A在three的源码里面有一个编辑器，里面实现了这个功能，目前没有研究明白，可以去看一下。这是目前我发现... 查看详情
jq实现登陆页面的拖拽功能
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery-1.9.1.min.js"type="text/javascript"charset="utf-8"></script> <title></title> 查看详情
js中利用cookie实现记住密码功能
js中利用cookie实现记住密码功能在登录界面添加记住密码功能，我首先想到的是在java后台中调用cookie存放账号密码，大致如下：1HttpServletRequestrequest2HttpServletResponseresponse3Cookieusername=newCookie("username","cookievalue");4Cookiepassword=newC 查看详情
js实现cookie记住密码
近来做记住密码时，用js的实现方式做了一下。 login.jsp页面代码 [html] viewplain copy <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% 查看详情
拖拽系列利用js面向对象oop思想实现拖拽封装
...想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽&rdq 查看详情
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序html代码：<ulondrop="drop_handler(event);"ondragover="dragover_handler(event);"><lidraggable="true"ondragstart="dragstart_handler(event);">1</li><lidraggable="tr 查看详情
实现元素简单的拖拽
1.通过元素的offsetLeft，offsettop实现元素的拖拽1<!DOCTYPEhtml>2<html>34<head>5<metacharset="UTF-8">6<title></title>7<styletype="text/css">8.box{9width:100px;10height:100px 查看详情
qt中如何实现一个treewidget的拖拽功能
QTreeWidget中有一个分级别的树，只允许同级别之间的拖拽功能，那位会做帮帮小弟吧参考技术AsetDragDropMode(QAbstractItemView::InternalMove) 查看详情
jqgrid最近在用jqgrid,我想要实现列的拖拽功能，请问有人实现过吗
我没说清楚，我要实现jqgrid列的拖拽，不是列宽，是列的顺序拖拽。谢谢参考技术A上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行... 查看详情
js—实现拖拽
JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时,... 查看详情
javascript实现网页元素的拖拽效果
以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。实现该效果的HTML页面代码例如以下所看到的：<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><styletype="text/css">#xixi{wid 查看详情
javascript实现最简单的拖拽效果
一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情
如何实现canvas图像的拖拽，点击等操作
...技术A虽然Canvas不能拖拽，但div可以拖拽，那怎么把二者结合起来呢。初步想法是将一个与Canvas图像大小差不多的div覆盖在其上，在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。既然要覆盖，先做些准... 查看详情
cookie技术实现自动登录+cookie中写入中文+记住用户名
结合上次写的cookie技术实现自动登录添加部分功能<tr><tdcolspan="2"><inputtype="checkbox"name="usernamelogin"id="usernamelogin"value="usernameOk">记住用户名<inputtype="checkbox"name="autologin"id="autologin" 查看详情