JS Event 鼠标拖拽事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Event鼠标拖拽事件</title>
<style>
#box{width:200px;height:200px;background:#000;position:absolute;}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.onload=function(){ //onload 加载页面；
var oBox=document.getElementById("box"); //找对象
document.onmousemove=function(ev){ //通常在document中添加事件，不在body中添加事件；添加onmousemove鼠标事件；绑定在事件的匿名函数，值可以有一个参数，并且它就是事件对象；
var l=ev.clientX;
var t=ev.clientY;
//console.log(l); //控制台显示鼠标的xy轴坐标
oBox.style.left=l+"px";
oBox.style.top=t+"px"; //div盒子跟随鼠标动，鼠标在document浏览器窗口中移动到哪，div盒子跟随到哪
};
};
</script>
</body>
</html>
=======================装作是 华丽的分割线===============================================
//解决鼠标动盒子跟着动的问题，改为 鼠标点击一下之后，盒子才跟着鼠标动
<script>
window.onload=function(){
var oBox=document.getElementById("box")；
oBox.onmousedown=function(){
document.onmousemove=function(ev){
var l=ev.clientX;
var t=ev.clientY;
//console.log(l);
oBox.style.left=l+"px";
oBox.style.top=t+"px";
};
};
};
</script>
=======================装作是 华丽的分割线===============================================
//解决 鼠标点击一下之后，盒子才跟着鼠标动 的问题，改为 鼠标左键点击到div盒子之后开始挪动盒子，松开鼠标之后 盒子就不在动
<script>
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onmousedown = function() {
document.onmousemove = function(ev) {
var l = ev.clientX;
var t = ev.clientY;
//console.log(l);
oBox.style.left = l + "px";
oBox.style.top = t + "px";
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
};
</script>
=======================装作是 华丽的分割线===============================================
//解决 鼠标点击盒子挪动 时候，盒子最左上角跳动到指针的位置 的问题；
<script>
window.onload = function() {
var oBox = document.getElementById("box");
oBox.onmousedown = function(ev) {
var disX=ev.clientX-oBox.offsetLeft; //计算X轴，div盒子左边框与鼠标之间的距离
var disY=ev.clientY-oBox.offsetTop; //计算Y轴，div盒子上边框与鼠标之间的距离
document.onmousemove = function(ev) {
var l = ev.clientX-disX; //计算X轴，浏览器左边窗口与div盒子左边边框的距离
var t = ev.clientY-disY; //计算Y轴，浏览器上边窗口与div盒子上边边框的距离
console.log(l);
oBox.style.left = l + "px";
oBox.style.top = t + "px";
};
document.onmouseup = function() {
document.onmousemove = null;
};
return false; //阻止默认事件的发生
};
};
</script>
JS Event 鼠标拖拽事件的更多相关文章
- 完美实现鼠标拖拽事件，解决各种小bug，基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- js实现鼠标拖拽
主要原理: 1.当鼠标按下时,记录鼠标坐标,用到的是 onmousedown: 2.当鼠标移动时,计算鼠标移动的坐标之差,用到的是 onmousemove: 3.当鼠标松开时,清除事件,用到的是 on ...
- js实现鼠标拖拽div-------Day44
假设去问这样一个问题"你认为鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速 ...
- HTML5深入学习之鼠标跟随，拖拽事件
知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover: 当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...
- js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- H5原生拖拽事件
使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
随机推荐
- 大数据-spark HA集群搭建
一.安装scala 我们安装的是scala-2.11.8 5台机器全部安装 下载需要的安装包,放到特定的目录下/opt/workspace/并进行解压 1.解压缩 [root@master1 ~]# ...
- linux 查看进程启动时，用户的工作目录
在linux下查看进程大家都会想到用 ps -ef|grep XXX可是看到的不是全路径,怎么看全路径呢?每个进程启动之后在 /proc下面有一个于pid对应的路径例如:ps -ef|grep pyt ...
- C++标准库类模板(stack)和 队列(queue)
在C++标准库(STL)中有栈和队列的类模板,因此可以直接使用 1.栈(stack):使用栈之前,要先包含头文件 : #include<stack> stack.push(elem); / ...
- ES6新特性整理，你需要了解的ES6知识
ES6是新版本JavaScript语言的标准,上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作已经完成,14年12月份放出了正式版本. 目前主流的浏览器都支持运行ES6代码,如果你的 ...
- .NET Core 中间件
中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 请求委托用于生成请求管道. 请求委托处理每个 H ...
- Eclipse的简单的用法大全
Eclipse我认为最重要的功能:断点调试 Debug的作用: 调试程序并且查看程序的执行流程 如何查看程序执行的流程 断点(就是一个标记,表示从哪里开始) 设置断点(在你想要断点的代码的左边双击即可 ...
- 【ExtJS】 布局Layout
布局用于定义容器如何组织内部子元素和控制子元素的大小. ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局. Containter容器类布局:负责容器内容Extj ...
- HTML5跨域请求--POST方式
var xmlHttp; // Create the XHR object. function createCORSRequest(method, url) { var xhr = new XMLHt ...
- JVM的内存结构
程序计数器 程序计数器(Program Counter Register)是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器.字节码解释器工作时就是通过改变这个计数器的值来选取下一条 ...
- CCF ISBN号码 201312-2
ISBN号码 问题描述 试题编号: 201312-2 试题名称: ISBN号码 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 每一本正式出版的图书都有一个ISBN号码与之对应 ...