原生JS實現(xiàn)拖拽效果

更新時間：2020年12月04日 08:45:36 作者：向天再借五百根

這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

想要讓整個元素移動需要三個事件：

鼠標(biāo)按下 onmousedown
鼠標(biāo)移動 onmousemove
鼠標(biāo)抬起 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">關(guān)閉</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');//獲取整個彈框的內(nèi)容
var title = document.querySelector('#title');
 title.addEventListener('mousedown',function(e){
  //當(dāng)按下鼠標(biāo)的時候，獲取到鼠標(biāo)在拖拽盒子內(nèi)的坐標(biāo)
  //鼠標(biāo)在頁面的坐標(biāo) - 大盒子距離瀏覽器左側(cè)的距離
  var x = e.pageX - login.offsetLeft;
  var y = e.pageY - login.offsetTop;

  //鼠標(biāo)移動
  document.addEventListener('mousemove',move);

  function move(e){
  //拖拽的盒子定位=鼠標(biāo)在頁面的坐標(biāo) - 鼠標(biāo)在拖拽盒子的坐標(biāo)
   login.style.left = e.pageX - x + 'px';
   login.style.top = e.pageY - y + 'px';
  }

  //當(dāng)鼠標(biāo)抬起的時候，將移動事件刪除
  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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: