<!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. 利用shuf对数据记录进行随机采样

    最近在用SVM为分类器做实验,但是发现数据量太大(2000k条记录)但是训练时间过长...让我足足等了1天的啊!有人指导说可以先进行一下随机采样,再训练,这样对训练结果不会有太大影响(这个待考证).所 ...

  2. GCC 编译详解 （转）

    GNU CC(简称为Gcc)是GNU项目中符合ANSI C标准的编译系统,能够编译用C.C++和Object C等语言编写的程序.Gcc不仅功能强大,而且可以编译如C.C++.Object C.Jav ...

  3. html2canvas 导出包含滚动条的内容

    import html2canvas from 'html2canvas'; exportPDF() { // 导出为 pdf let dom = document.querySelector('yo ...

  4. gvoory脚本中关于HttpClient使用详解实例

    一.gvoory脚本中关于HttpClient使用详解实例 HttpClient:是一个接口 首先需要先创建一个DefaultHttpClient的实例 HttpClient httpClient=n ...

  5. 2016/05/25 Ajax 跨域 转

    起因: 起因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统 中用ajax调用A系统系统的接口(数据格式为 ...

  6. 搭建集群后再namenode上查看进程发现除了三个基本进程还可能有别的进程，例如本来在子节点出现的进程出现在了主节点上

    搭建集群后再namenode上查看进程发现除了三个基本进程还可能有别的进程,例如本来在子节点出现的进程出现在了主节点上,namenode按正常来说是有三个进程的:namenode,resourcema ...

  7. YTU 2918: Shape系列-4

    2918: Shape系列-4 时间限制: 1 Sec  内存限制: 128 MB 提交: 276  解决: 232 题目描述 小聪送给小亮和小华的形状他们都很喜欢,小亮和小华非要比一下他们两个的形状 ...

  8. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  9. golang中获取字符串长度的几种方法

    一.获取字符串长度的几种方法   - 使用 bytes.Count() 统计   - 使用 strings.Count() 统计   - 将字符串转换为 []rune 后调用 len 函数进行统计   ...

  10. SPOJ：NT Games（欧拉函数）

    Katniss Everdeen after participating in Hunger Games now wants to participate in NT Games (Number Th ...