<!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. 十分简洁的手机浏览器 lydiabox

    没有地址栏,没有工具栏.web app无需下载.无需安装.无需更新,加入即用:再也不用记住网址.更不用输入网址--一款这样极简极方便的浏览器,你想要吗? 我们做了一个十分简洁的手机浏览器,这个浏览器也 ...

  2. 移动端html5页面长按实现高亮全选文本内容的兼容解决方式

    近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...

  3. [IT学习]Greatwall

    1.evilcos 优雅 过城墙 如果没这个开源的关键解决方案怎么办呢?我给你一个永恒思路,技术贴请看: http://www.ibm.com/developerworks/cn/linux/l-cn ...

  4. Part1-Redefining your data-access strategy 重新定义你的数据访问策略

    欢迎来到Entity Framework 4 In Action,EF是微软3.5 SP1推出的ORM工具,现在已经更新到4.0版本(...)本书能确保你in a  robust and model- ...

  5. 2016/3/27 PHP中include和require的区别详解

    1.概要 require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说, ...

  6. 更改Mysql登录密码

    版本号49之前的跨域设置 在Windows命令行下修改mysql数据库密码步骤如下: 1.通过dos命令进入mysql的bin目录: 2.输入“mysql -uroot -p”,回车进入mysql命令 ...

  7. myeclipse提示：Syntax error on tokens, delete these tokens怎么解决

    有中文字符或者符号,包括空格. 上次遇到一个问题,检查了一遍语法没错误, 后来发现是拷贝代码的时候有一部分中文空格没删除,就出现这个问题了. 一个个删除就OK了.

  8. Gradle 安装

    Gradle介绍 Gradle是一个基于JVM的构建工具,它提供了: 像Ant一样,通用灵活的构建工具 可以切换的,基于约定的构建框架 强大的多工程构建支持 基于Apache Ivy的强大的依赖管理 ...

  9. UVA11383 Golden Tiger Claw —— KM算法

    题目链接:https://vjudge.net/problem/UVA-11383 题解: 根据KM()算法,标杆满足:l(x) + l(y) >= w(x, y) . 当求完最大权匹配之后,所 ...

  10. 比特币交易（Transaction）的输入与输出

    比特币通过“挖矿”机制保证了不能任意造币.通过分布式网络和HashCash机制解决双重支付问题.事实上比特币系统中不存在独立的电子货币,而只存在交易单(账单),货币值是依附于交易单存在的,所以比特币中 ...