<!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. 第三方开源库和jar包的区别

    jar包和第三方开源库的根本区别在于,开源库的功能比jar包功能更强大,通过引入库项目可以访问java文件以及该开源库项目下的资源文件,例如图片,layout等文件 jar包中只能放class文件 引 ...

  2. thinkphp怎么设置输入网址直接进入首页

    1.设置apache服务器的时候,文件的位置要写包含index.php的那个主文件夹. 2.apache和thinkphp默认index.html是作为网站的默认首页,所以在浏览器端可以直接输入网址进 ...

  3. ghj

    如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文件中,你已经定义了元素p,又定义了一个cla ...

  4. 第三方开源框架的下拉刷新列表(QQ比较常用的)。

    PullToRefreshListView是第三方开源框架下拉刷新列表,比较流行的QQ 微信等上面都在用. 下载地址(此开源框架于2013年后不再更新) 点此下载 package com.lixu.k ...

  5. Nginx-缓冲原理及优化

    一.作用及原理 作用: 使用缓冲释放后端服务器 反向代理的一个问题是代理大量用户时会增加服务器进程的性能冲击影响.在大多数情况下,可以很大程度上能通过利用Nginx的缓冲和缓存功能减轻.当代理到另一台 ...

  6. C#中判断字符串是否中文的方法

    public bool IsChinaString(string CString) { bool BoolValue = false; ; i < CString.Length; i++) { ...

  7. MySQL 表名区分大小写设置

    1.关闭MySQL服务:         控制面板主页-管理工具-服务-MySQL服务 2.在服务器运行目录找到my.ini 或者my.cnf文件: 在[mysqld]下面增加一行添加 :lower_ ...

  8. WebService学习--(一)webservice相关概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  9. June 11. 2018 Week 24th, Monday

    Love is the beauty of the soul. 爱是灵魂之美. From Saint Augustine. The complete version of this quote goe ...

  10. MySQL的数据文件存储

    MySQL的数据文件存储 MyISAM引擎分为:静态.动态和压缩MyISAM三种: 静态MyISAM:如果数据表中的各数据列的长度都是预先固定好的,服务器将自动选择这种表类型.因为数据表中每一条记录所 ...