- <!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>
- Windows.onload = function() {
- // 拖拽功能 (主要是触发三个事件: onmousedown\onmousemove\onmouseup)
- var drag = document.getElementById('drag');
- // 点击某物体时, 用 drag 对象即可, move 和 up 是全局区域, 也就是整个文档通用, 应该使用 document 对象而不是 drag 对象 (否则, 采用 drag 对象时物体只能往右方或下方移动)
- drag.onmousedown = function(e) {
- var e = e || Windows.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 || Windows.event; // 兼容 IE 浏览器
- var left = e.clientX - diffX;
- var top = e.clientY - diffY;
- // 控制拖拽物体的范围只能在浏览器视窗内, 不允许出现滚动条
- if (left < 0) {
- left = 0;
- } else if (left > Windows.innerWidth - drag.offsetWidth) {
- left = Windows.innerWidth - drag.offsetWidth;
- }
- if (top < 0) {
- top = 0;
- } else if (top > Windows.innerHeight - drag.offsetHeight) {
- top = Windows.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>
来源: http://www.bubuko.com/infodetail-2961890.html