原生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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
js实现查询商品案例
Jul 22 Javascript
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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
linux中cd命令使用详解
2015/01/08 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
Javascript----文件操作
2007/01/18 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python 迭代器与生成器实例详解
2017/05/18 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python操作链表的示例代码
2020/09/27 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
教室布置标语
2014/06/26 职场文书
研究生导师推荐信
2014/09/06 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
年度考核表个人总结
2015/03/06 职场文书
历史博物馆观后感
2015/06/05 职场文书
介绍信应该怎么开?
2019/04/03 职场文书