<!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 鼠标拖拽事件的更多相关文章

  1. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  2. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  3. js实现鼠标拖拽

    主要原理: 1.当鼠标按下时,记录鼠标坐标,用到的是 onmousedown: 2.当鼠标移动时,计算鼠标移动的坐标之差,用到的是 onmousemove: 3.当鼠标松开时,清除事件,用到的是 on ...

  4. js实现鼠标拖拽div-------Day44

    假设去问这样一个问题"你认为鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速 ...

  5. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  6. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  7. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  8. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

随机推荐

  1. flask内置函数 send_static_file(filename)

    内部使用的函数将静态文件从静态文件夹发送到浏览器. current_app.send_static_file(filename)

  2. Hibernate 自动创建表bug问题解决

    我在hibernate.cfg.xml配置文件中添加了自动创建表的的属性:(这样当数据库中没有此表是,hibernate就会自动帮我们创建一张表) <property name="hb ...

  3. 吃奶酪 状压dp

    题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...

  4. 01. css sprite是什么，有什么优缺点？

    1.css sprite是什么,有什么优缺点? 通常被意译为“CSS图像拼合”或“CSS贴图定位” 1)CSS Sprites的优点 利用CSS Sprites能很好地减少网页的http请求,从而大大 ...

  5. 最新 php oracle 数据库连接 数据库分页

    php 5连接 oracle 10g php oracle 分页 <?php//buyicode studio 20/12/2009//总记录数$sql = "select ROWNU ...

  6. （转）Go语言核心36讲之Go语言学习路线

  7. java高并发测试代码

    package com.example.test; import java.net.URL;import java.net.URLConnection;import java.util.concurr ...

  8. opencv_python使用cv2.imread()读取中文路径报错问题(转)

    原地址:https://blog.csdn.net/liuqinshouss/article/details/78696032 1 说明 本篇中使用的opencv版本为3.3,python使用的版本为 ...

  9. QT 相关

    Qt是一个GUI框架,在GUI程序中,主线程也叫GUI线程,因为它是唯一被允许执行GUI相关操作的线程.对于一些耗时的操作,如果放在主线程中,就是出现界面无法响应的问题. 解决方法一:在处理耗时操作中 ...

  10. svn: Failed to run the WC DB work queue associated svn的bug解决

    第一步,下载sqlite 官方网址  :https://www.sqlite.org/download.html 第二步:解压放在c盘 第三步:配置环境变量 第四步:找到工作空间的.svn文件,cmd ...