原生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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
详解Django中的过滤器
2015/07/16 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python实现五子棋小游戏
2020/03/25 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
英语自我评价范文
2014/01/24 职场文书
投标邀请书范文
2014/01/31 职场文书
法制演讲稿
2014/09/10 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014企业年终工作总结
2014/12/23 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
质量整改通知单
2015/04/21 职场文书
研讨会通知
2015/04/27 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书