原生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_09_Function与Object
Oct 16 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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 str_pad 函数用法简介
2009/07/11 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
php生成与读取excel文件
2016/10/14 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
在Python中使用元类的教程
2015/04/28 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
keras topN显示,自编写代码案例
2020/07/03 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
Python实现拼音转换
2021/06/07 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python