JS+DIV实现拖动效果


Posted in Javascript onFebruary 11, 2020

本文实例为大家分享了JS+DIV实现拖动效果的具体代码,供大家参考,具体内容如下

效果图

JS+DIV实现拖动效果

思路

JS+DIV实现拖动效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
  <div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
  <div class="box"></div>
</div>
<script>

  var startx;
  var starty;
  var startLeft;
  var startTop;
  var titleDiv=document.getElementById("title");
  var mainDiv=document.getElementById("main");
  var isDown=false;
//  鼠标按下
  function movedown(e){
    e=e?e:window.event;
    isDown=true;
    startx=e.clientX;
    starty=e.clientY;
    startLeft=parseInt(mainDiv.style.left);
    startTop=parseInt(mainDiv.style.top);
  }
//  鼠标移动
  function move(e){
    e=e?e:window.event;
    if(isDown) {
      mainDiv.style.left = e.clientX - (startx - startLeft)+"px";
      mainDiv.style.top = e.clientY - (starty - startTop)+"px";
    }
  }
//  鼠标松开
  function moveup(){
    isDown=false;
  }
  titleDiv.οnmοusedοwn=movedown;
  titleDiv.οnmοusemοve=move;
  titleDiv.οnmοuseup=moveup;
</script>
</body>
</html>

优化(封装,以及解决拖动问题(事件捕获))

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
  <div id="title"
     style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
  <div class="box"></div>
</div>
<script>


  function Mover(title) {
    this.obj = title;
    this.startx = 0;
    this.starty;
    this.startLeft;
    this.startTop;
    this.mainDiv = title.parentNode;
    var that = this;
    this.isDown = false;
    this.movedown = function (e) {
      e = e ? e : window.event;
      if (!window.captureEvents) {
        this.setCapture();
      } //事件捕获仅支持ie
//      函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标,
//      所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。
//      如果鼠标光标在另一个线程创建的窗口上,只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。
//      非ie浏览器 需要在document上设置事件
      that.isDown = true;
      that.startx = e.clientX;
      that.starty = e.clientY;

      that.startLeft = parseInt(that.mainDiv.style.left);
      that.startTop = parseInt(that.mainDiv.style.top);
    }
    this.move = function (e) {
      e = e ? e : window.event;
      if (that.isDown) {
        that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px";
        that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px";
      }
    }
    this.moveup = function () {
      that.isDown = false;
      if (!window.captureEvents) {
        this.releaseCapture();
      } //事件捕获仅支持ie
    }
    this.obj.onmousedown = this.movedown;
    this.obj.onmousemove = this.move;
    this.obj.onmouseup = this.moveup;

    //非ie浏览器
    document.addEventListener("mousemove", this.move, true);
  }
  var mover = new Mover(document.getElementById("title"));


  //写两个是为了解决 ie 和非ie 浏览器关于事件捕获 的兼容性问题


</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JavaScript手机振动API
Jun 11 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 #Javascript
原生js拖拽实现图形伸缩效果
Feb 10 #Javascript
js实现单元格拖拽效果
Feb 10 #Javascript
详解Vue template 如何支持多个根结点
Feb 10 #Javascript
JavaScript canvas动画实现时钟效果
Feb 10 #Javascript
JavaScript canvas仿代码流瀑布
Feb 10 #Javascript
Vue数字输入框组件使用方法详解
Feb 10 #Javascript
You might like
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP递归的三种常用方式
2019/02/28 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
Python探索之pLSA实现代码
2017/10/25 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python实现矩阵打印
2019/03/02 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python LMDB库的使用示例
2021/02/14 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
幼师自我鉴定范文
2013/10/01 职场文书
三好学生自我鉴定
2013/12/17 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
材料物理专业求职信
2014/09/01 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2015年春节标语口号
2014/12/09 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书