這篇文章主要介紹了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;
border-right-color: red;
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>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<div class="wrap">
<div class="head">
<span>試著拖拽我</span>
<span id="close">【關閉】</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是如何實現盒子拖拽動畫效果的內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
