js基础 -----鼠标事件(按下 拖拽)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script> //获取需要拖拽的元素
var divs = document.querySelector('div'); //元素的鼠标落下事件
divs.onmousedown = function(ev){ //event的兼容性
var ev = ev||event; //获取鼠标按下的坐标
var x1 = ev.clientX;
var y1 = ev.clientY; //获取元素的left,top值
var l = divs.offsetLeft;
var t = divs.offsetTop; //给可视区域添加鼠标的移动事件
document.onmousemove = function(ev){ //event的兼容性
var ev = ev||event; //获取鼠标移动时的坐标
var x2 = ev.clientX;
var y2 = ev.clientY; //计算出鼠标的移动距离
var x = x2-x1;
var y = y2-y1; //移动的数值与元素的left,top相加,得出元素的移动的距离
var lt = y+t;
var ls = x+l; //更改元素的left,top值
divs.style.top = lt+'px';
divs.style.left = ls+'px'; } //清除
document.onmouseup = function(ev){ document.onmousemove = null; } } </script> </body>
</html>
js基础 -----鼠标事件(按下 拖拽)的更多相关文章
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- VMware Linux下拖拽补丁vmtools的安装和卸载
Linux下拖拽补丁vmtools的安装和卸载 by:授客 QQ:1033553122 Vmware 8.0.4为例子 步骤1.VM->Install Vmware Tools... 步骤2.查 ...
- JS基础(二)事件监听练习之table鼠标悬停行变色
JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].r ...
- 关于js在一个固定的盒子里面拖拽的问题(包含临界值)
回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有 onmousedown,onmo ...
- 原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...
- Hammer.js 实现移动端元素的拖拽库
1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...
- js基础之事件
一.event对象 document.onclick=function(ev){ oEvent=event?event:ev;//兼容性写法 alert(oEvent.clientX); alert( ...
- js实现弹出框的拖拽
//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...
- iOS边练边学--触摸事件以及能够拖拽的UIView的练习
一.用户在使用APP的过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型: 二.响应者对象 在iOS中只有继承了了UIResponder的对象才能接受并处理事件,这样的对象称之为“响应者对象 ...
随机推荐
- Linux —— 压缩文件
Linux——压缩文件 为什么需要压缩文件? 文件在传输过程中,可能由于文件过大,传输所需时间过多.减少文件大小有两个明显的好处,一是可以减 少存储空间,二是通过网络传输文件时,可以减少传 ...
- properties文件读取配置信息
public static void main(String[] args){ String printerName=""; String path = "C:\\Bar ...
- PyTorch 60 分钟入门教程:数据并行处理
可选择:数据并行处理(文末有完整代码下载) 作者:Sung Kim 和 Jenny Kang 在这个教程中,我们将学习如何用 DataParallel 来使用多 GPU. 通过 PyTorch 使用多 ...
- HashMap的数据机构是什么样的?
参考:http://www.cnblogs.com/ITtangtang/p/3948406.html
- CASE UPDATE
https://leetcode-cn.com/problems/swap-salary/description/ Given a table salary, such as the one belo ...
- Installing Node.js via package manager
https://nodejs.org/en/download/package-manager/
- 有关MAC、PHY和MII
这是一篇转载,原文链接:http://www.cppblog.com/totti1006/archive/2008/04/22/47829.html 以太网(Ethernet)是一种计算机局域网组网技 ...
- unbantu安装mysql
1,方法一 sudo apt-get install mysql-server apt isntall mysql-client apt install libmysqlclient-dev(暂不知用 ...
- 《Visual C++ 2010入门教程》系列三:关于C++的一些问题
<Visual C++ 2010入门教程>系列三:关于C++的一些问题 这一回我自己都不知道应该写点什么好,或许今天的篇幅会比往常短很多.我说过,这不是C++的教程,因为我还没有那个能 ...
- sqlserver游标使用误区
在使用游标出现逻辑错误时,查阅资料,只有改掉while中的游标取值在while循环最后,没有说明while以前会出现的错误,而且没有具体说明原因,今天在工作中解决了这个问题,写了这个博客,希望对使用游 ...