JS事件中级 --- 拖拽
http://bbs.zhinengshe.com/thread-1200-1-1.html
要求：实现div块的拖拽
原理：拖拽过程中鼠标点和div块的相对位置保持不变。
需要理解三点：
1. 为什么要把onmousemove，onmouseup加在document上面 ？
2. onmouseup要怎么使用 ？
3. 如何防止div块跑出边界 ？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById("div1"); var disX = 0;
var disY = 0; oDiv.onmousedown = function (event) {
disX = event.clientX - oDiv.offsetLeft;
disY = event.clientY - oDiv.offsetTop; document.onmousemove = function (event) { var divLeft = event.clientX - disX;
var divTop = event.clientY - disY; if (divLeft < 0) divLeft = 0;
if (divLeft > document.documentElement.clientWidth-oDiv.offsetWidth) {
divLeft = document.documentElement.clientWidth-oDiv.offsetWidth;
}
if (divTop < 0) divTop = 0;
if (divTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
divTop = document.documentElement.clientHeight - oDiv.offsetHeight;
} oDiv.style.left = divLeft + "px";
oDiv.style.top = divTop + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
};
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
运行效果：【点击这里】
JS事件中级 --- 拖拽的更多相关文章
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- 关于d3.js 将一个element 拖拽到另一个element的响应事件
rt 正在做机柜可视化, 一个需求是能拖拽左侧列表的设备名称, 拖到右侧42U机柜中,并将设备图片放置在对应机柜位置上. 开始的时候一切都很顺利,点击左侧设备名称,添加一个g容器,将设备名称作为tex ...
- js阻止默认事件、拖拽等等
1.自定义右键菜单: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> &l ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- 纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- js制作可拖拽可点击的悬浮球
兼容mouse事件和touch事件,支持IE9及其以上 效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE h ...
随机推荐
- Linux之more命令
命令解释 more命令类似与cat命令,却比cat命令强大,它以全屏幕的方式按页显示文本文件的内容,支持vi中的关键字定位操作. 命令说明 more [选项] 文件.. 命令选项 -d 显示帮助 ...
- 第七章 路由 71 路由-router-link的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JQuery 中each的使用方法
JQuery中的each函数在1.3.2的官方文档中的描述如下: each(callback) 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都 ...
- pyinstall python文件打包成二进制exe文件
pycharm + python3 + win7 1 pip install pyinstall (官网) 2 准备 .py 文件 3 具体例子 from PyQt5.QtWidgets impor ...
- What is a Digital Signature? 理解数字签名与数字证书
What is a Digital Signature?An introduction to Digital Signatures, by David Youd Bob (Bob's public k ...
- 树的计数 + prufer序列与Cayley公式(转载)
原文出处:https://www.cnblogs.com/dirge/p/5503289.html 树的计数 + prufer序列与Cayley公式 学习笔记(转载) 首先是 Martrix67 的博 ...
- Luogu P4139 上帝与集合的正确用法
题目链接:Click here Solution: 这道题就考你会不会扩展欧拉定理,根据扩展欧拉定理可知 \[ a^b \equiv a^{(b\,mod\,\varphi(p))+\varphi(p ...
- Java当中的IO流-时间api(下)-上
Java当中的IO流(下)-上 日期和时间 日期类:java.util.Date 系统时间: long time = System.currentTimeMillis(); public class ...
- Multi-judge Solving
C. Multi-judge Solving 写这个题的时候也是思维出了漏洞....容易漏掉的一点就是在别的 oj 上做了题之后可能不能够马上回原来的 oj 上做题,这是写循环的时候需要注意的的方,需 ...
- ERROR 1130 (HY000): Host 'test177' is not allowed to connect to this MySQL server
异常 在测试环境新搭建的MySQL服务端,启动后登陆MySQL如下异常: [root@test177 ~]# mysql -u root -po2jSLWw0ni -h test177 mysql: ...