原生JS实现拖拽效果

 更新时间:2020-12-09 17:01:25   作者:佚名   我要评论(0)

本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下
想要让整个元素移动需要三个事件:

鼠标按下 onmousedown

鼠标移动 onmousemove

本文实例为大家分享了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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)
  • Sortable.js拖拽排序使用方法解析
  • js实现拖拽效果
  • javascript实现移动端上的触屏拖拽功能
  • 使用js实现的简单拖拽效果
  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
  • JS组件Bootstrap Table表格行拖拽效果实现代码
  • 使用javaScript实现鼠标拖拽事件
  • js完美的div拖拽实例代码
  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性

相关文章

  • 原生JS实现拖拽效果

    原生JS实现拖拽效果

    本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠
    2020-12-09

最新评论