<!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基础 -----鼠标事件(按下 拖拽)的更多相关文章

  1. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  2. VMware Linux下拖拽补丁vmtools的安装和卸载

    Linux下拖拽补丁vmtools的安装和卸载 by:授客 QQ:1033553122 Vmware 8.0.4为例子 步骤1.VM->Install Vmware Tools... 步骤2.查 ...

  3. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  4. 关于js在一个固定的盒子里面拖拽的问题(包含临界值)

    回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有  onmousedown,onmo ...

  5. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  6. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  7. js基础之事件

    一.event对象 document.onclick=function(ev){ oEvent=event?event:ev;//兼容性写法 alert(oEvent.clientX); alert( ...

  8. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  9. iOS边练边学--触摸事件以及能够拖拽的UIView的练习

    一.用户在使用APP的过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型: 二.响应者对象 在iOS中只有继承了了UIResponder的对象才能接受并处理事件,这样的对象称之为“响应者对象 ...

随机推荐

  1. anaconda中新rdkit安装

    1. 执行 conda create -c rdkit -n my-rdkit-env rdkit 该步骤经测试发现需FQ,而模拟器无法完成FQ(至少我不知道方法), 因此在本机上配置好环境后复制粘贴 ...

  2. 【内存数据库】OracleTimesten连接DSN创建用户

    ************************************************************************ ****原文:blog.csdn.net/clark_ ...

  3. JDBC连接数据库查询信息的步骤(提取成配置文件方式)

    硬编码格式的弊端:数据库发生改变时,要重新修改代码,重新编译和部署 解决方法:将数据库信息写在配置文件当中,让程序通过读取配置文件来获得这些信息 jdbc.driver.class=com.mysql ...

  4. POJ2289 Jamie's Contact Groups —— 二分图多重匹配/最大流 + 二分

    题目链接:https://vjudge.net/problem/POJ-2289 Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 6 ...

  5. YTU 2428: C语言习题 计算该日在本年中是第几天

    2428: C语言习题 计算该日在本年中是第几天 时间限制: 1 Sec  内存限制: 128 MB 提交: 1505  解决: 857 题目描述 定义一个结构体变量(包括年.月.日).编写一个函数d ...

  6. html5--switch选择结构的优化

    html5--switch选择结构的优化 问题: 使用循环语句判断月份是31天还是30天 两点提示: 使用switch多条件判断语句 合理的省略break优化代码 <!DOCTYPE html& ...

  7. 强类型DataSet (2011-12-30 23:16:59)转载▼ 标签: 杂谈 分类: Asp.Net练习笔记 http://blog.sina.com.cn/s/blog_9d90c4140101214w.html

    强类型DataSet (2011-12-30 23:16:59) 转载▼ 标签: 杂谈 分类: Asp.Net练习笔记 using System; using System.Collections.G ...

  8. Ural2004: Scientists from Spilkovo(德布鲁因序列&思维)

    Misha and Dima are promising young scientists. They make incredible discoveries every day together w ...

  9. [USACO 2017DEC] Barn Painting

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5141 [算法] 树形DP 时间复杂度 : O(N) [代码] #include< ...

  10. python 操作memercache类库

    pip install python-memcached pip install  pymemcache pip install   python-libmemcached