1. 程式人生 > >使用 vue 實現拖拽的簡單案例,不會超出可視區域

使用 vue 實現拖拽的簡單案例,不會超出可視區域

實現拖拽之前,先了解幾個小常識:

這兩種獲取滑鼠座標的方法,區別在於基於的物件不同:

  • pageX和pageY獲取的是滑鼠指標距離文件(HTML)的左上角距離,不會隨著滾動條滾動而改變;
  • clientX和clientY獲取的是滑鼠指標距離可視視窗(不包括上面的位址列和滑動條)的距離,會隨著滾動條滾動而改變;
  1. clientX : 是用來獲取滑鼠點選的位置距離 當前視窗 左邊的距離
  2. clientY: 是用來獲取滑鼠點選的位置距離 當前視窗 上邊的距離
  3. offsetWidth: 用來獲取當前拖拽元素 自身的寬度
  4. offsetHeight:用來獲取當前拖拽元素 自身的高度 
  5. document.documentElement.clientHeight :螢幕的可視高度
  6. document.documentElement.clientWidth:螢幕的可視高度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue實現拖拽</title>
		<script src="./js/vue.min.js"></script>
	</head>
	<style>
		*{margin: 0;padding:0;}
	    #app{
	        position: relative;     /*定位*/
	        top: 10px;
	        left: 10px;
	        width: 80px;
	        height: 80px;
	        background: #666;       /*設定一下背景*/
	    }
	</style>
	<body>
		<div id="app" @mousedown="move">
			{{positionX}}
			{{positionY}}
		</div>
	</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			positionX: 0,
			positionY: 0
		},
		methods: {
			move(e){
				let odiv = e.target;// 獲取目標元素
				
				//計算出滑鼠相對點選元素的位置,e.clientX獲取的是滑鼠的位置,OffsetLeft是元素相對於外層元素的位置
				let x = e.clientX - odiv.offsetLeft;
				let y = e.clientY - odiv.offsetTop;
				console.log(odiv.offsetLeft,odiv.offsetTop)
				document.onmousemove = (e) => {
					// 獲取拖拽元素的位置
					let left = e.clientX - x;
					let top = e.clientY - y;
					this.positionX = left;
					this.positionY = top;
					//console.log(document.documentElement.clientHeight,odiv.offsetHeight)
					// 把拖拽元素 放到 當前的位置
					if (left <= 0) {
						left = 0;
					} else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
						//document.documentElement.clientWidth 螢幕的可視寬度
						left = document.documentElement.clientWidth - odiv.offsetWidth;
					}
					
					if (top <= 0) {
						top = 0;
					} else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
						// document.documentElement.clientHeight 螢幕的可視高度
						top = document.documentElement.clientHeight - odiv.offsetHeight
						
					}
					odiv.style.left = left + "px";
					odiv.style.top = top + "px"
					
				}
                // 為了防止 火狐瀏覽器 拖拽陰影問題
				document.onmouseup = (e) => {
					document.onmousemove = null;
            		document.onmouseup = null
				}
			}
		}
	})
</script>
</html>