原生JS实现拖拽效果


Posted in Javascript onDecember 04, 2020

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

想要让整个元素移动需要三个事件:

鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标抬起 onmouseup

html

<div id="login" class="login">
 <!-- 点击title拖拽 -->
  <div id="title" class="login-title">登录会员
 <!-- title end -->
   <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
  </div>
  <div class="login-input-content">
   <div class="login-input">
    <label>用户名:</label>
    <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
   </div>
   <div class="login-input">
    <label>登录密码:</label>
    <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
   </div>
  </div>
  <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>

原生JS实现拖拽效果

JS

var login = document.querySelector('.login');//获取整个弹框的内容
var title = document.querySelector('#title');
 title.addEventListener('mousedown',function(e){
  //当按下鼠标的时候,获取到鼠标在拖拽盒子内的坐标
  //鼠标在页面的坐标 - 大盒子距离浏览器左侧的距离
  var x = e.pageX - login.offsetLeft;
  var y = e.pageY - login.offsetTop;

  //鼠标移动
  document.addEventListener('mousemove',move);

  function move(e){
  //拖拽的盒子定位=鼠标在页面的坐标 - 鼠标在拖拽盒子的坐标
   login.style.left = e.pageX - x + 'px';
   login.style.top = e.pageY - y + 'px';
  }

  //当鼠标抬起的时候,将移动事件删除
  document.addEventListener('mouseup',function(){
   document.removeEventListener('mousemove',move);
  })

 })

CSS部分

<style>
 *{
   padding: 0px;
   margin: 0px;
  }
  .login {
   display: block;
   width: 512px;
   height: 280px;
   position: fixed;
   border: #ebebeb solid 1px;
   left: 50%;
   top: 50%;
   background: #ffffff;
   box-shadow: 0px 0px 20px #ddd;
   z-index: 9999;
   transform: translate(-50%, -50%);
  }
  .login-title {
   width: 100%;
   margin: 10px 0px 0px 0px;
   text-align: center;
   line-height: 40px;
   height: 40px;
   font-size: 18px;
   position: relative;
   cursor: move;
  }
  .login-input-content {
   margin-top: 20px;
  }
  .login-button {
   width: 50%;
   margin: 30px auto 0px auto;
   line-height: 40px;
   font-size: 14px;
   border: #ebebeb 1px solid;
   text-align: center;
  }
  .login-bg {
   display: none;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(0, 0, 0, .3);
  }
  a {
   text-decoration: none;
   color: #000000;
  }
  .login-button a {
   display: block;
  }
  .login-input input.list-input {
   float: left;
   line-height: 35px;
   height: 35px;
   width: 350px;
   border: #ebebeb 1px solid;
   text-indent: 5px;
  }
  .login-input {
   overflow: hidden;
   margin: 0px 0px 20px 0px;
  }
  .login-input label {
   float: left;
   width: 90px;
   padding-right: 10px;
   text-align: right;
   line-height: 35px;
   height: 35px;
   font-size: 14px;
  }
  .login-title span {
   position: absolute;
   font-size: 12px;
   right: -20px;
   top: -30px;
   background: #ffffff;
   border: #ebebeb solid 1px;
   width: 40px;
   height: 40px;
   border-radius: 20px;
  }
</style>

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

Javascript 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
jQuery实现大图轮播
Feb 13 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
JS如何监听div的resize事件详解
Dec 03 #Javascript
JavaScript十大取整方法实例教程
Dec 03 #Javascript
js实现圆形菜单选择器
Dec 03 #Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 #Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
You might like
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP反射API示例分享
2016/10/08 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python快排算法详解
2019/03/04 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Eclipse面试题
2014/03/22 面试题
公司合作协议范文
2014/10/01 职场文书
英语演讲开场白
2015/05/29 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL