JS鼠标拖拽实例分析


Posted in Javascript onNovember 23, 2015

本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考,具体如下:

JS鼠标拖拽实例分析

JS鼠标拖拽实例分析

JS代码:

<script>
window.onload=function()
{
  var oDiv=document.getElementById('div');
  var disX=0;
  var disY=0;
  oDiv.onmousedown=function(ev) //鼠标按下DIV
  {
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离,这个距离是不会变的,通过这个新鼠标的X坐标减去disX就是DIV的Left
    disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离,这个距离是不会变的,通过这个新鼠标的Y坐标减去disY就是DIV的Top
    document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug,所以要给整个页面加onmousemove事件
    {
      var oEvent=ev||event;
      var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
      var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
      if(oLeft<0) //当DIV的Left小于0,也就是移出左边
      {
        oLeft=0; //就把DIV的Left设置为0,就不能移出左边
      }
      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度,如果Left大于这个像素
      {
        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
      }
      if(oTop<0) //当DIV的To小于0,也就是移出左边
      {
        oTop=0; //就把DIV的Top设置为0,就不能移出上边
      }
      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素,如果Top大于这个像素
      {
        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
      }
      oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
      oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
    };
    document.onmouseup=function() //鼠标松开时
    {
      document.onmousemove=null; //把鼠标移动清楚
      document.onmouseup=null; //把鼠标松开清楚
    };
    return false; //阻止FireFox的默认事件 bug
  };
};
</script>

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;}
</style>
<script>
window.onload=function()
{
  var oDiv=document.getElementById('div');
  var disX=0;
  var disY=0;
  oDiv.onmousedown=function(ev) //鼠标按下DIV
  {
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离,这个距离是不会变的,通过这个新鼠标的X坐标减去disX就是DIV的Left
    disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离,这个距离是不会变的,通过这个新鼠标的Y坐标减去disY就是DIV的Top
    document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug,所以要给整个页面加onmousemove事件
    {
      var oEvent=ev||event;
      var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
      var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
      if(oLeft<0) //当DIV的Left小于0,也就是移出左边
      {
        oLeft=0; //就把DIV的Left设置为0,就不能移出左边
      }
      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度,如果Left大于这个像素
      {
        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
      }
      if(oTop<0) //当DIV的To小于0,也就是移出左边
      {
        oTop=0; //就把DIV的Top设置为0,就不能移出上边
      }
      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素,如果Top大于这个像素
      {
        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
      }
      oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
      oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
    };
    document.onmouseup=function() //鼠标松开时
    {
      document.onmousemove=null; //把鼠标移动清楚
      document.onmouseup=null; //把鼠标松开清楚
    };
    return false; //阻止FireFox的默认事件 bug
  };
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
You might like
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php事件驱动化设计详解
2016/11/10 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
从零学Python之hello world
2014/05/21 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python中kmeans聚类实现代码
2018/02/23 Python
python实现矩阵打印
2019/03/02 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
网管求职信
2014/03/03 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
服务承诺书范文
2014/05/19 职场文书
社区服务标语
2014/07/01 职场文书
公司踏青活动方案
2014/08/16 职场文书
优秀员工自荐书
2015/03/06 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
运动会表扬稿范文
2015/05/05 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Python常遇到的错误和异常
2021/11/02 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers