[读码时间] 完美拖拽

说明：代码取自网络，注释为原文所有！

<!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

[读码时间] 完美拖拽相关推荐

关于完美拖拽的问题三
简单的修改了一下,让它自动吸附,原理很简单,判断t,l的距离,只要让它在小于一个距离的时候距离变为0 就可以了带边框的自动吸附的拖拽代码如下: <!doctype html> <h ...
[读码时间] 记住密码提示框
说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head><meta charset="utf-8&qu ...
[读码时间] css函数设置读取对象的属性
说明:代码取自网络,注释为笔者学习时添加! <!DOCTYPE html> <html> <head><meta charset="utf-8&qu ...
[读码时间] 自定义右键菜单
说明:代码取自网络,CSS中注释为笔者学习时添加,JS中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...
[读码时间] 跟随鼠标移动（大图展示）
说明:代码取自网络,css中注释为笔者学习时添加,js中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...
LayaAir拖拽移动对象并吸附(附源码)
前言: 拖拽移动对象是2D休闲小游戏中常用的一个功能,典型代表例如<植物大战僵尸>中,种植植物的表现形式,拖拽植物卡片种植到相应的地点.今天介绍一下在Laya项目中实现这一功能. 该功能实 ...
Python+selenium 自动化高级应用篇：借助pyautogui实现web前端带轨迹拖拽功能，解决ActionChains拖拽失效问题
有一些 web 前端的交互,必须有鼠标轨迹才能成功的实现拖拽功能. 而 selenium 自带的 ActionChains 方法,是一瞬间从 A 点到 B 点的. 解决思路: 利用元素返回的相对浏览器 ...
关于拖拽上传 [一个拖拽上传修改头像的流程]
拖拽是操作系统用户体验最伟大的改进之一.它让人随心所欲的操作,更符合人们的直观感受. 如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其 ...
android qq消息数拖拽动画,史上最详细仿QQ未读消息拖拽粘性效果的实现
好久没写文章了,前段时间由于项目代码重构忙了一段时间,现在终于有点时间了就为大家带来一篇关于动画学习的自定义View:类似QQ消息拖拽的效果. 其实QQ当时更新的时候我还没注意到这个小红点是可以拖拽的 ...

[读码时间] 完美拖拽

[读码时间] 完美拖拽相关推荐

最新文章

热门文章