原生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、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
从vue源码看props的用法
Jan 09 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
12 种使用Vue 的最佳做法
Mar 30 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
用PHP开发GUI
2006/10/09 PHP
打造计数器DIY三步曲(中)
2006/10/09 PHP
php中的观察者模式
2010/03/24 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python excel多行合并的方法
2020/12/09 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
个性与发展自我评价
2015/03/06 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2016教师节问候语
2015/11/10 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android