使用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 相关文章推荐
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
详细分析React 表单与事件
Jul 08 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动态绑定变量的用法
2015/06/16 PHP
培养自己的php编码规范
2015/09/28 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
python单例模式实例解析
2018/08/28 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
仓库文员岗位职责
2014/04/06 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
校车安全管理责任书
2015/05/11 职场文书
人代会简报
2015/07/21 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS