JavaScript的事件对象_实现拖拽
实现拖拽一个元素
拖拽的流程:
当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<body>
<div id="box1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件,当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
box1.onmousedown = function(event){
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop; //为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot; //修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
}; //为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
JavaScript的事件对象_实现拖拽的更多相关文章
- JavaScript的事件对象_鼠标事件
鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等. 一.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发 ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript的事件对象_概述/this
JavaScript 事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能. 最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事 ...
- JavaScript的事件对象_滚轮事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript的事件对象_其他属性和方法
在标准的 DOM 事件中,event 对象包含与创建它的特定事件有关的属性和方法.触发的事件类型不一样,可用的属性和方法也不一样. 在这里,我们只看所有浏览器都兼容的属性或方法.首先第一个我们了解一下 ...
- JavaScript的事件对象_事件流
事件流事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.事件流包括两种 ...
- H5 语义化、基本事件 浅析 (含file对象、drag拖拽等)
1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...
- javascript事件类型之界面拖拽交互
一.在线DEMO 界面拖拽交互
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
随机推荐
- maven 错误:读取 xxx.jar 时出错;invalid LOC header (bad signature) 1 错误
reqHeader:{Accept=text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8, Upgrade-Insecure- ...
- 使用javascript获取wx.config内部字段解决微信分享
背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppI ...
- 动态生成自定义控件ascx如何给ascx传值
有机会看到有网友在论坛上发出问题: 在网页上的铵钮执行之后,动态加载的用户控件,如果没有处理好,会在子用户控件的铵钮被执行时抛弃.因此我们需要着重需要处理的关键点.同相子用户控件在动态加载之后,它的状 ...
- Unity 动态加载资源的方式。
方式 特点 用法 Resource.load 安装包会比较大 在Asset文件夹下建一个Resources命名的文件夹,在打包安装包时会把 Resources文件夹下的所有文件都打包进去,不管 ...
- C#单元测试:NUnit详细使用方法
1. TDD的简介 首先什么是TDD呢?Kent Beck在他的<<测试驱动开发 >>(Addison-Wesley Professional,2003)一书中,使用下面2个原 ...
- C++/CLI 本地字符串和托管字符串之间的转换
参考: https://docs.microsoft.com/zh-cn/cpp/dotnet/overview-of-marshaling-in-cpp #include "msclr/m ...
- [LeetCode]Longest Palindromic Substring题解(动态规划)
Longest Palindromic Substring: Given a string s, find the longest palindromic substring in s. You ma ...
- PAT 1029. Median
尼玛,数组偶数个数的时候取中位数是取中间两者中的前者,还tmd一直再算平均,卧槽 #include <iostream> #include <cstdio> #include ...
- js 防止连续点击
简称 js防连点 var flag = true; $(".yzm>span").click(function(){ if(!flag){ return fals ...
- Spring Data MongoDB 级联操作
DBRef 方式关联 DBRef 就是在两个Collection之间定义的一个关联关系,暂不支持级联的保存功能 例子:一个Person对象有多个Book对象,一对多关系 实体Person public ...