vueを使用してドラッグ&ドロップを実現する簡単なケースは、表示領域を超えません.

ドラッグ&ドロップを実現する前に、いくつかの小さな常識を理解しておきます.
マウス座標を取得する方法の2つは、ベースとなるオブジェクトが異なる点です.

pageXとpageYは、スクロールバーがスクロールするにつれて変化しないマウスポインタ距離ドキュメント(HTML)の左上隅距離を取得する.

clientXとclientYは、上のアドレスバーとスライドバーを含まないマウスポインタからの距離を取得し、スクロールバーがスクロールするにつれて変化します.

clientX:マウスクリックを取得するための位置現在のウィンドウの左側からの距離

clientY:マウスクリックを取得するための位置が現在のウィンドウの上からの距離

である.

offsetWidth:現在のドラッグ要素自体の幅を取得するための

offsetHeight:現在のドラッグ要素自体の高さを取得するための

document.documentElement.ClientHeight:画面の表示高さ

document.documentElement.ClientWidth:画面の表示高さ

	
		
		
		
	
	
	
		

			{{positionX}}
			{{positionY}}
		
	

	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
				}
			}
		}
	})