原生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 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
JQuery toggle使用分析
Nov 16 Javascript
使用JS读秒使用示例
Sep 21 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 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
PHP发送AT指令实例代码
2016/05/26 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
独特的python循环语句
2016/11/20 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
自荐信模版
2013/10/24 职场文书
高中生自我鉴定范文
2013/10/30 职场文书
商务邀请函范文
2014/01/14 职场文书
狼和鹿教学反思
2014/02/05 职场文书
关爱留守儿童标语
2014/06/18 职场文书
运动会稿件100字
2014/09/24 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
高考学习决心书
2015/02/04 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
Axios取消重复请求的方法实例详解
2021/06/15 Javascript