[读码时间] 完美拖拽
生活随笔
收集整理的這篇文章主要介紹了
[读码时间] 完美拖拽
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
說明：代碼取自網絡，注釋為原文所有！
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>完美拖拽</title><style type="text/css">html, body {overflow: hidden;}body, div, h2, p {margin: 0;padding: 0;}body {color: #fff;background: #000;font: 12px/2 Arial;}p {padding: 0 10px;margin-top: 10px;}span {dcolor: #ff0;padding-left: 5px;}#box {position: absolute;width: 300px;height: 150px;background: #333;border: 2px solid #ccc;top: 50%;left: 50%;margin: -75px 0 0 -150px;}#box h2 {height: 25px;cursor: move;background: #222;border-bottom: 2px solid #ccc;text-align: right;padding: 0 10px;}#box h2 a {color: #fff;font: 12px/25px Arial;text-decoration: none;outline: none;}</style><script type="text/javascript"> window.onload=function () {var oBox=document.getElementById("box");var oH2 = oBox.getElementsByTagName("h2")[0];var oA = oBox.getElementsByTagName("a")[0];var aSpan = oBox.getElementsByTagName("span");var disX = disY = 0;var bDrag = false;var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}]//鼠標按下, 激活拖拽 oH2.onmousedown = function (event){var event = event || window.event;bDrag = true;disX = event.clientX - oBox.offsetLeft;disY = event.clientY - oBox.offsetTop;aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop})this.setCapture && this.setCapture();return false};//拖拽開始 document.onmousemove = function (event){if (!bDrag) return;var event = event || window.event;var iL = event.clientX - disX;var iT = event.clientY - disY;var maxL = document.documentElement.clientWidth - oBox.offsetWidth;var maxT = document.documentElement.clientHeight - oBox.offsetHeight;iL = iL < 0 ? 0 : iL;iL = iL > maxL ? maxL : iL;iT = iT < 0 ? 0 : iT;iT = iT > maxT ? maxT : iT;oBox.style.marginTop = oBox.style.marginLeft = 0;oBox.style.left = iL + "px";oBox.style.top = iT + "px";aPos.push({x:iL, y:iT})status();return false};//鼠標釋放, 結束拖拽 document.onmouseup = window.onblur = oH2.onlosecapture = function (){bDrag = false;oH2.releaseCapture && oH2.releaseCapture();status()};//回放拖動軌跡 oA.onclick = function (){if (aPos.length == 1) return;var timer = setInterval(function (){var oPos = aPos.pop();oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)}, 30);this.focus = false;//去除鏈接虛線return false};//阻止冒泡 oA.onmousedown = function (event){(event || window.event).cancelBubble = true};//監聽狀態函數function status (){aSpan[0].innerHTML = bDrag;aSpan[1].innerHTML = oBox.offsetTop;aSpan[2].innerHTML = oBox.offsetLeft}//初始調用 status() };</script> </head> <body><div id="box"><h2><a href="javascript:;">點擊回放拖動軌跡</a></h2><p><strong>Drag:</strong><span></span></p><p><strong>offsetTop:</strong><span></span></p><p><strong>offsetLeft:</strong><span></span></p></div> </body> </html> View Code?
轉載于:https://www.cnblogs.com/sx00xs/p/6488040.html
總結
以上是生活随笔為你收集整理的[读码时间] 完美拖拽的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怀孕期间梦到死人是什么意思
- 下一篇： 基于VMWare配置VxWorks开发环