<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>拖動框效果</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? #box{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 100px;
? ? ? ? ? ? top: 100px;
? ? ? ? }
? ? ? ? #title{
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: space-between;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? background-color: skyblue;
? ? ? ? ? ? color: white;
? ? ? ? ? ? user-select: none;
? ? ? ? }
? ? ? ? #title .text{
? ? ? ? ? ? padding-left: 5px;
? ? ? ? ? ? flex: 1;
? ? ? ? }
? ? ? ? #title .close{
? ? ? ? ? ? width: 25px;
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? line-height: 25px;
? ? ? ? ? ? border: 1px solid lightpink;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? background-color: lightsalmon;
? ? ? ? ? ? margin-right: 2px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box">
? ? ? ? <div id="title">
? ? ? ? ? ? <span class="text">標題</span>
? ? ? ? ? ? <span class="close">X</span>
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? /*
? ? ? ? ? ? dom.offsetLeft 獲取元素的默認左邊距
? ? ? ? ? ? dom.offsetTop 獲取元素的默認上邊距
? ? ? ? ? ? window.innerWidth 視口寬度
? ? ? ? ? ? window.innerHeight 視口高度
? ? ? ? ? ? dom.offsetWidth 獲取元素可見寬度(width+border+padding)
? ? ? ? ? ? dom.offsetHeight 獲取元素可見高度(height+border+padding)
? ? ? ? ? ? e.pageX 鼠標指針到X軸坐標
? ? ? ? ? ? e.pageY 鼠標指針到Y軸坐標
? ? ? ? */
? ? ? ? /* // 查看鼠標點擊事件默認參數
? ? ? ? window.onclick = function(event) {
? ? ? ? ? ? console.log(event); ?// PointerEvent{...}
? ? ? ? } */
? ? ? ? let box = document.querySelector('#box')
? ? ? ? let title = document.querySelector('#title')
? ? ? ? // 單擊叉刪除盒子
? ? ? ? let delBox = document.querySelector('.close')
? ? ? ? delBox.onclick = function() {
? ? ? ? ? ? box.remove()
? ? ? ? }
? ? ? ? // 定義一個變量判斷盒子是否能夠移動，初值為false
? ? ? ? let ismove = false
? ? ? ? console.log('移動狀態(tài)初始值' + ismove);
? ? ? ? // 獲取標題盒子在視口中的位置（邊距）
? ? ? ? // 獲取標題盒子的默認左邊距
? ? ? ? let box_left = box.offsetLeft
? ? ? ? // 獲取標題盒子的默認上邊距
? ? ? ? let box_top = box.offsetTop
? ? ? ? console.log('默認左邊距' + box_left, '默認上邊距' + box_top); ?// 100 100
? ? ? ? // console.log(top); ?// Window
? ? ? ? // window.innerWidth 返回視口寬度
? ? ? ? // window.innerHeight 返回視口高度
? ? ? ? // box.offsetWidth 返回盒子的可見寬度（width+border+padding）
? ? ? ? // box.offsetHeight 返回盒子的可見寬度（height+border+padding）
? ? ? ? // 定義可移動距離的最大值
? ? ? ? // 定義盒子的最大左邊距 = 視口的寬度 - 盒子的寬度
? ? ? ? let letfMax = window.innerWidth - box.offsetWidth
? ? ? ? // 定義盒子的最大上邊距 = 視口的高度 - 盒子的高度
? ? ? ? let topfMax = window.innerHeight - box.offsetHeight
? ? ? ? // 鼠標按下處到box左邊框的距離
? ? ? ? let left_x = 0
? ? ? ? // 鼠標按下處到box上邊框的距離
? ? ? ? let top_y = 0
? ? ? ? // 給title對象注冊鼠標按下事件
? ? ? ? title.onmousedown = function(event) {
? ? ? ? ? ? // 每個方法里面的第一個參數是當前事件的事件對象，通過該對象可以獲取當前事件的相關信息
? ? ? ? ? ? // 解構出對象中pageX, pageY屬性
? ? ? ? ? ? let {pageX, pageY} = event
? ? ? ? ? ? // console.log(pageX, pageY);
? ? ? ? ? ? // 獲取鼠標在標題盒子中的位置
? ? ? ? ? ? // 鼠標在視口中的x軸坐標值 減去 標題盒子的左邊距 等于 鼠標按下的位置在盒子中的左邊距
? ? ? ? ? ? left_x = pageX - box_left
? ? ? ? ? ? // 鼠標在視口中的y軸坐標值 減去 標題盒子的上邊距 等于 鼠標按下的位置在盒子中的上邊距
? ? ? ? ? ? top_y = pageY - box_top
? ? ? ? ? ? console.log(`鼠標當前在box中的位置${left_x}, ${top_y}`);
? ? ? ? ? ? console.log(pageX, pageY);
? ? ? ? ? ? // 當鼠標按下時，賦值為true，表示可以移動
? ? ? ? ? ? ismove = true
? ? ? ? ? ? console.log('按下事件移動狀態(tài)' + ismove);
? ? ? ? ? ? /* // 如果你想這樣進行賦值，可以使用解構賦值將對象解構出來，解構多個屬性時簡化代碼
? ? ? ? ? ? let pageX = e.pageX
? ? ? ? ? ? let pageY = e.pagey
? ? ? ? ? ? let {pageX, pageY} = e */
? ? ? ? }
? ? ? ? // 給window對象注冊鼠標移動事件
? ? ? ? window.onmousemove = function(event) {
? ? ? ? ? ? if(ismove){
? ? ? ? ? ? ? ? // 獲取鼠標最新的位置坐標
? ? ? ? ? ? ? ? let {pageX, pageY} = event
? ? ? ? ? ? ? ? // 更新box的最新位置
? ? ? ? ? ? ? ? // 先獲取最新左邊距和上邊距
? ? ? ? ? ? ? ? box_left = pageX - left_x
? ? ? ? ? ? ? ? box_top = pageY - top_y
? ? ? ? ? ? ? ? // 最新位置不能超出屏幕空間
? ? ? ? ? ? ? ? // 再判斷是否為可移動距離，如果不在范圍內則不可再移動
? ? ? ? ? ? ? ? if(box_left < 0){
? ? ? ? ? ? ? ? ? ? box_left = 0
? ? ? ? ? ? ? ? ? ? // 賦值為false，表示不能再移動
? ? ? ? ? ? ? ? ? ? ismove = false ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(box_left > letfMax){
? ? ? ? ? ? ? ? ? ? box_left = letfMax
? ? ? ? ? ? ? ? ? ? ismove = false ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(box_top < 0){
? ? ? ? ? ? ? ? ? ? box_top = 0
? ? ? ? ? ? ? ? ? ? ismove = false ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(box_top > topfMax){
? ? ? ? ? ? ? ? ? ? box_top = topfMax
? ? ? ? ? ? ? ? ? ? ismove = false ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // console.log(`最新左邊距${box_left},上邊距${box_top}`);
? ? ? ? ? ? ? ? // 最后賦值給box.style
? ? ? ? ? ? ? ? box.style.left = box_left + 'px'
? ? ? ? ? ? ? ? box.style.top = box_top + 'px'
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 給window對象注冊鼠標彈起事件
? ? ? ? window.onmouseup = function(event) {
? ? ? ? ? ? let {pageX, pageY} = event
? ? ? ? ? ? // 當鼠標彈起時，賦值為false，表示不能再移動
? ? ? ? ? ? ismove = false ?
? ? ? ? ? ? console.log('彈起事件移動狀態(tài)' + ismove);
? ? ? ? ? ? console.log(pageX, pageY);
? ? ? ? }
? ? ? ? /*
? ? ? ? ? ? 焦點事件：
? ? ? ? ? ? 獲得焦點事件
? ? ? ? ? ? onfocus
? ? ? ? ? ? 失去焦點事件
? ? ? ? ? ? onblur
? ? ? ? */
? ? ? ? // 給window對象注冊失去焦點事件
? ? ? ? window.onblur = function() {
? ? ? ? ? ? // 當切出瀏覽器時，瀏覽器會失去焦點
? ? ? ? ? ? // 此時再賦值為false，表示不可再移動
? ? ? ? ? ? ismove = false
? ? ? ? ? ? console.log('失去焦點');
? ? ? ? }
? ? </script>
</body>
</html>
