如何使用js实现盒子拖拽动画效果

本文实例为大家分享了js实现盒子拖拽动画的具体代码,供大家参考,具体内容如下

js拖拽效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}
.wrap {
    width: 400px;
    height: 200px;
    border: 1px solid #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
    box-sizing: border-box;
}
.wrap .head {
    height: 40px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #ccc;
    box-sizing: border-box;
    line-height: 40px;
    user-select: none;
}
.head:hover {
    cursor: move;
}
.head span {
    float: left;
}
#close {
    float: right;
}
#close:hover {
    cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="head"> <span>试着拖拽我</span> <span id="close">关闭 X</span> </div>
</div>
<script>
 let wrap = document.querySelector('.wrap');
 let close = document.getElementById('close');
 let head = document.querySelector('.head');
 
 head.onmousedown = function (e) {
  // 获得鼠标在 head 中的坐标 
  let x = e.pageX - wrap.offsetLeft;
  let y = e.pageY - wrap.offsetTop;
  console.log(x, y);
  document.onmousemove = function (e) {
   
  let xx = e.pageX - x;
  let yy = e.pageY - y;
  // 设置边界限制
  xx = xx < 0 ? 0 : xx;
  yy = yy < 0 ? 0 : yy;
  if (xx >= innerWidth - wrap.offsetWidth) {
   document.documentElement.scrollLeft = 20;
  } else {
   document.documentElement.scrollLeft = 0;
  }
  xx = xx > innerWidth - wrap.offsetWidth ? innerWidth-wrap.offsetWidth : xx; 
  yy = yy > innerHeight - wrap.offsetHeight + document.documentElement.scrollTop ? innerHeight - wrap.offsetHeight + document.documentElement.scrollTop : yy;
  wrap.style.left = xx + 'px';
  wrap.style.top = yy + 'px';
  // 禁止X滚动轴
  document.body.style.overflowX = 'hidden';
  wrap.style.marginLeft = 0;
  wrap.style.marginTop = 0;
  };
 };
 
 document.onmouseup = function () {
  document.onmousemove = null;
 };
 
 close.onclick = function () {
  wrap.style.display = 'none';
 };
 </script>
</body>
</html>

 

共享资源网提供最优质的资源集合。
共享资源网 » 如何使用js实现盒子拖拽动画效果

发表评论

共享资源网提供最优质的资源集合

充值中心 开启会员