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> ...
随机推荐
- MACD 的数学解释
目录 MACD 的数学解释 MACD 的一般定义 引入延迟算子 Taylor 展开 权重分析 共振? MACD 的数学解释 MACD 的一般定义 \[ \begin{align*} DIF & ...
- KVO 使用及原理
KVO的基本原理大概是这样的 当一个对象被观察时, 系统会新建一个子类NSNotifying_A ,在子类中重写了对象被观察属性的 set方法, 并且改变了该对象的 isa 指针的指向(指向了新 ...
- Xshell和Xftp登陆WSL
参考:https://zhuanlan.zhihu.com/p/34950508 关键步骤: 1. 下载Xshell和Xftp 2. 拷贝ssh配置文件 sudo cp /etc/ssh/sshd_ ...
- 神奇的树上启发式合并 (dsu on tree)
参考资料 https://www.cnblogs.com/zhoushuyu/p/9069164.html https://www.cnblogs.com/candy99/p/dsuontree.ht ...
- ie下的值改变事件
前两天在页面上写了一个值改变事件,值是用js改变的,用的oninput方法和onpropertyChange方法,但是可能是因为框架的缘故,在ie浏览器下,陷入了莫名其妙的循环中.然后考虑是在加载的时 ...
- HihoCoder - 1513 bitset处理五维偏序
题意:给出\(n<3e4\)个有序组\((a,b,c,d,e)\),求对第\(i\)个有序组有多少个\(j\)满足\((a_j<a_i,b_j<b_i,c_j<c_i,d_j& ...
- Windows下的特殊unicode输入
相信很多运维人员见过这样的一种输入方法,按住键盘的ALT键然后在小键盘处输入88,放开ALT键,然后再按住ALT在小键盘处输入80,再放开键盘,屏幕光标文本处就会依次出现XP这个2个字母,这个很神奇, ...
- STM32的GPIO工作原理 | 附电路图详细分析
STM32的GPIO介绍 STM32引脚说明 GPIO是通用输入/输出端口的简称,是STM32可控制的引脚.GPIO的引脚与外部硬件设备连接,可实现与外部通讯.控制外部硬件或者采集外部硬件数据的功能. ...
- java多线程-线程间协作
大纲: wait.notify.notifyAll Condition 生产消费者 一.wait.notify.notifyAll wait.notify.notifyAll是Object的本地fin ...
- 关于DES加密之选择更新版
数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...