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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
js文字横向滚动特效
Nov 11 Javascript
原生js实现选项卡功能
Mar 08 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JavaScript Archive Network 集合
2007/05/12 Javascript
JS 判断代码全收集
2009/04/28 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python+opencv实现动态物体识别
2018/01/09 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python手写均值滤波
2020/02/19 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python进行统计建模
2020/08/10 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
女大学生自我鉴定
2013/12/09 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
MySQL存储过程及语法详解
2022/08/05 MySQL