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 ...
随机推荐
- java8学习之Lambda表达式深入与流初步
Lambda表达式深入: 在上一次[http://www.cnblogs.com/webor2006/p/8135873.html]中介绍Lambda表达式的作用时,其中说到这点: 如标红处所说,既然 ...
- vs调试时，不显示局部变量
为了测试一个函数的返回值,就在某个函数里加了一个局部变量,调试却不显示所添加变量的信息. 你一定设置成了release 模式.改为debug就可以了. 比较弱智的问题,mark一下.
- Python学习笔记：序列构成的数组
列表推导是一种构建列表(list)的快捷方式 #列表推导 symbols = '!@#$%' codes = [ord(symbol) for symbol in symbols] #ord()Pyt ...
- Kettle 事务、转换内顺序、excel模版、使用踩坑
kettle中转换和作业的执行顺序: 1.一个作业内的转换,是顺序执行的. 2.一个转换内的步骤是并行执行的. 3.作业内不支持事务,转换内支持事务. 根据业务需要,通常需要在 ...
- HTML 获取class里的多个值 和 dataset的使用
属性:classList var x = event.target; console.log(x); console.log(x.classList); 可以发现 获取了全部的class里的值 获取单 ...
- Oracle之：Function ：getdate()
create or replace function getdate(sp_date varchar) return date is Result date; begin if LENGTH(sp_d ...
- [Functional Programming] Church Encodings: Numberals
const log = console.log; // zero :: &fa.a const zero = f => x => x; // zero is F // once : ...
- 对ACID的深层解读
A:Atomieity 通常,原子指不可分解为更小粒度的东西,该术语在计算机的不同领域里面有着相似但却微妙的差异.在多线程并发编程中,如果某线程执行一个原子操作,这意味着其他线程是无法看到该结果的中间 ...
- wind本地MySQL数据到hive的指定路径
一:使用:kettle:wind本地MySQL数据到hive的指定路径二:问题:没有root写权限网上说的什么少jar包,我这里不存在这种情况,因为我自己是导入jar包的:mysql-connecto ...
- Hibernate 5 的模块/包（modules/artifacts）
Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化). 模块名称 说明 hibernate-core 这个是 Hibernat ...