使用javaScript实现鼠标拖拽事件


Posted in Javascript onApril 03, 2020

本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>

  <style>
   body{
    margin: 0;
    padding: 0;
   }
   div{
    position: absolute;
    top: 200px;/*div的y轴*/
    left: 150px;/*div的x轴*/
    width: 300px;
    height: 200px;
    background-color: gray;
   }
   div:hover{
    cursor: move;
   }
  </style>

  <script>

   /*
    * 分析:
    * 获取鼠标实时移动的坐标;m_move_x,m_move_y
    * 鼠标按下时的坐标;m_down_x,m_down_y
    * div的坐标;dx,dy
    * 鼠标按下时,鼠标与div的偏移量;md_x,md_y
    * div的新坐标;ndx,ndy
    */

   var isDown = false;//记录鼠标状态
   var move_div ;//要操作的div对象
   var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

   //鼠标按下
   function down(){
    move_div = document.getElementById("move_div");
    isDown = true;

    //获取鼠标按下时坐标
    m_down_x = event.pageX;
    m_down_y = event.pageY;

    //获取div坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标与div偏移量
    md_x = m_down_x - dx;
    md_y = m_down_y - dy;
   }

   //鼠标移动
   function move(){
    move_div = document.getElementById("move_div");

    //实时更新div的坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标移动实时坐标
    m_move_x = event.pageX;
    m_move_y = event.pageY;

    //鼠标按下时移动才触发
    if(isDown){

     //获取新div坐标,鼠标实时坐标 - 鼠标与div的偏移量
     ndx = m_move_x - md_x;
     ndy = m_move_y - md_y;

     //把新div坐标值赋给div对象
     move_div.style.left = ndx+"px";
     move_div.style.top = ndy+"px";

    }

   }

   //鼠标释放
   function up(){
    isDown = false;
   }


  </script>

 </head>
 <body>

  <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>

 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经验几则 推荐
Sep 05 Javascript
js的延迟执行问题分析
Jun 23 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
fastadmin中调用js的方法
May 14 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 #Javascript
javaScript实现复选框全选反选事件详解
Nov 20 #Javascript
javaScript实现滚动条事件详解
Mar 24 #Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
You might like
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript 写类方式之六
2009/07/05 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python的继承知识点总结
2018/12/10 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python如何求圆的面积
2020/07/01 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
《母鸡》教学反思
2014/02/25 职场文书
学校评语大全
2014/05/06 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
政府采购方案
2014/06/12 职场文书
天坛导游词
2015/02/02 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
MySQL查询日期时间
2022/05/15 MySQL