<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.calculator {
background:#f00;
position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/
display: block;
width: 200px;
height: 200px;
color:#fff;
cursor: move;
left:20px; /*鼠标呈拖拽状*/
}
</style>
<body>
<div class="calculator">鼠标原来内容</div>
<div class="calculator" id="drag">鼠标拖拽内容</div>
<script>
window.onload = function() {
//拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup)
var drag = document.getElementById('drag');
//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
drag.onmousedown = function(e) {
var e = e || window.event; //兼容ie浏览器
var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
var diffY = e.clientY - drag.offsetTop;
/*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条，
解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法，
可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候，
限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/
if(typeof drag.setCapture!='undefined'){
drag.setCapture();
}
document.onmousemove = function(e) {
var e = e || window.event; //兼容ie浏览器
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移动时重新得到物体的距离，解决拖动时出现晃动的现象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
};
document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动
this.onmousemove = null;
this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
//修复低版本ie bug
if(typeof drag.releaseCapture!='undefined'){
drag.releaseCapture();
}
};
};
};
</script>
</body>
</html>

js拖拽效果详细讲解的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. js拖拽效果的实现及原理

    元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...

  5. js拖拽效果的实现

    1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  6. js拖拽效果实现

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

  7. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

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

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

  9. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. 【温故而知新】HTTP 报文

    HTTP 报文是在 HTTP 应用程序之间发送的数据块.这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义. 报文流 报文在客户端.服务器和代理之间的流动称为报文流. HTTP 使用 ...

  2. c:\windows\system32\config\systemprofile\desktop 打不开

    Question 重启开机后显示桌面打不开: 再次重启后无效 Solution 打开注册表regedit如下路径,复制Desktop值到 同路径下的Desktop中,再重启.

  3. git执行cherry-pick时修改提交信息

    git执行cherry-pick时修改提交信息 在本地分支执行cherry-pick命令时有时需要修改commit message信息,可以加参数-e实现: git cherry-pick -e co ...

  4. anaconda常用操作汇总

    (1)设置国内(清华)镜像 # 添加Anaconda的TUNA镜像conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/an ...

  5. DRF 序列化器-Serializer (2)

    作用 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 完成数据校验功能 3. 反序列化,把客户端发送过来的数据,经过request以后变成字典,序列化器 ...

  6. iframe 自适应

    <iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" o ...

  7. Nowcoder217D msc的背包 背包、生成函数、组合

    传送门 发现这是一个背包问题,而\(k\)又很大,考虑生成函数方式解决这个问题. 对于体积为\(1\)的物品的生成函数为\(\frac{1}{1 - x}\),体积为\(2\)的物品的生成函数为\(\ ...

  8. 添加jar包到本地Maven仓库

              在使用Maven的过程中,经常碰到有些jar包在中央仓库没有的情况.如果公司有私服,那么就把jar包安装到私服上.如果没有私服,那就把jar包安装到本地Maven仓库.今天介绍2种 ...

  9. Linux中什么是动态网站环境及如何部署

    当谈论起网站时,我们可能听说过静态和动态这两个词,但却不知道它们的含义,或者从字面意思了解一些却不知道它们的区别. 这一切可以追溯到网站和网络应用程序,Web应用程序是一个网站,但很多网站不是Web应 ...

  10. PS调出韩式米黄色室内婚纱照片

    原图: Camera Raw打开原图. 光线调整,压暗白色,保留高光细节,少量对比黑色压暗. 降低整体饱和. 曲线调整,压暗高光明度. 减红加青(融合色彩). 中间调,靠近暗部区域加蓝,靠近亮部区域加 ...