vueプロジェクトの下で多要素が境界を限定するドラッグ機能を実現

要件:複数の要素が制限された範囲内で自由にドラッグ&ドロップできるようにする
(vue以外の項目も使えますので、少し修正すればいいです)
ドラッグの原理:
onmousedown(マウスの左ボタンの下)、onmousemove(マウスの移動)、onmouseup(マウスの離す)の3つのイベントの順序で実行し、移動中に位置決めが必要な値を取得し、その要素の位置決めのleft、top値を変更します.
境界を限定する原理:
相応の境界判断をする
直接コードを入力します.コードコメントは非常に詳細です.

	export default{
		data() {
			return{
				list:[1,2,3,4,5],
				isDrag: false
			}
		},
		created() {
		},
		mounted() {
		},
		methods:{
			//       
			btnclick(index) {
				//   ID 
				console.log('a'+index)
				//            ，    ，      （         ）
				var obj=document.getElementById("a"+index)
				var obox=document.getElementById("dragBox");
				console.log('clientWidth', obox.clientWidth)
				console.log('box.clientWidth', obj.clientWidth)
				//            
				this.drag(obj,obox)
			},
			drag(box,obox) {
				  var disX
				  var disY
				  var that = this
				  //         
				  box.onmousedown=function(ev){
				    var oEvent=ev||event
					// clientX，clientY：              x，y  
					// offsetLeft，offsetTop:             
				    disX=oEvent.clientX - box.offsetLeft
				    disY=oEvent.clientY - box.offsetTop
					that.isDrag = true
					console.log('isDrag', that.isDrag)
					console.log('clientX', oEvent.clientX)
					console.log('clientY', oEvent.clientY)
					console.log('offsetLeft', box.offsetLeft)
					console.log('offsetTop', box.offsetTop)
					console.log('disX', disX)
					console.log('disY', disY)
					//       
				    document.onmousemove=function(ev){
						//           
						if (that.isDrag) {
							var oEvent=ev||event
							  //               top，left  
							  var l=oEvent.clientX-disX
							  var t=oEvent.clientY-disY
							  //       (          （    ）  )
							  //      
							  // if(l<0){
							  //   l=0
							  // }else if(l>document.documentElement.clientWidth-box.offsetWidth){
							  //        
							  //   l=document.documentElement.clientWidth-box.offsetWidth
							  // }
							  //      
							  // if(t<0){
							  //   t=0
							  // }else if(t>document.documentElement.clientHeight-box.offsetHeight){
							  //        
							  //   t=document.documentElement.clientHeight-box.offsetHeight
							  // }
							  /**       ，              */
							  //          
							   if(l<0){
								  l=0;
								}
								if(t<0){
								  t=0;
								}
								//         ( l=    -     ，             )
							   if(l>obox.clientWidth - box.clientWidth){
								  l=obox.clientWidth - box.clientWidth
								}
								//         ( t=    -     ，             )
								if(t>obox.clientHeight - box.clientHeight){
								   t = obox.clientHeight - box.clientHeight
								}
							  box.style.left=l+'px'
							  box.style.top=t+'px'
							}
						}
				    document.onmouseup=function(){
					  that.isDrag = false
				      document.onmousemove=null
				      document.onmouseup=null //      ，onmouseup         ，       
				    }
				    return false //      ，  div    ff ，           
				  }
		}
	}
}