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脚本 Node.js 使用入门
Mar 07 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
js常见遍历操作小结
Jun 06 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
JS实现网页时钟特效
Mar 25 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
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP查询分页的实现代码
2017/06/09 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python简明入门教程
2015/08/04 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
django使用xadmin的全局配置详解
2019/11/15 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
早安问候语大全
2015/11/10 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书