JS拖拽目标
来源:互联网 发布:sql server 系统时间 编辑:程序博客网 时间:2024/05/22 10:40
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById("box");
box.onmousedown = function (e) {
var e = e || window.event;
console.log(e.clientX);
var diffX = e.clientX - box.offsetLeft;//鼠标相对目标偏移量X
var diffY = e.clientY - box.offsetTop;//鼠标相对目标偏移量Y
document.onmousemove = function (e) {
var e = e || window.event;
box.style.left = e.clientX - diffX + "px";
box.style.top = e.clientY - diffY + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmousedown = null;
};
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
0 0
- JS拖拽目标
- 使用js动态定位目标
- JS事件目标event.target
- Asm.js: Javascript的编译目标
- Node.js建站1-基础与目标
- js 点击其余地方 ,隐藏 目标区域
- 理解JS捕获、目标、冒泡三个阶段
- 目标
- 目标
- 目标
- 目标
- 目标
- 目标.....
- 目标
- 目标!
- 目标
- 目标
- 目标
- linux下安装配置zookeeper
- 代码混淆
- 新技能 get —— 使用 python 生成词云
- mysql_Innodb的undo_log和redo_log
- 把汉字转换成拼音的util
- JS拖拽目标
- 实验吧安全杂项WP(五)
- 常用正则表达式
- 正则表达式
- Java程序员的面试经历和题库(转)
- JDBC驱动oci和thin区别
- NDK学习笔记<一> 初步认识JNI|成功搭建NDK开发环境
- 在Java中"=="和"equal"的区别
- Async异步流程控制