利用jQuery ui获取拖拽和缩放相关数据

css部分

<link rel="stylesheet" type="text/css" href="../libs/jQueryUI/jquery-ui.css"/>

HTML部分

<nav id="header">最佳Partner</nav>
<div id="container">
	<ul class="leftCon">
		<li data-id="tab1">模板1</li>
		<li data-id="tab2">模板2</li>
		<li data-id="tab3">模板3</li>
	</ul>
	<div class="rightCon">
		<div id="cool">
			<img src="../img/cool.jpg" >
		</div>
		<div id="person">
			<img src="../img/person.jpg" >
		</div>
		<div id="nice">
			<img src="../img/nice.jpg" >
		</div>
	</div>
</div>

js部分

<script src="../libs/jQuery/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/jQueryUI/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(".leftCon li").click(function(e){
	const currentLi = $(e.target).data("id");
	if(currentLi == 'tab1'){
		$("#cool").css({
			"display":"block"
		})
		// 拖拽方法：draggable()
		// containment：运动范围
		//cursor：光标样式
		// stop：停止拖拽事件 
		$("#cool").draggable({
			containment:".rightCon",
			cursor:"move",
			stop:function(e){
				const coolstopWith = $(e.target)[0].clientWidth;
				const coolstopHeight = $(e.target)[0].clientHeight;
				const coolstopTop = $(e.target)[0].offsetTop;
				const coolstopLeft = $(e.target)[0].offsetLeft;
				console.log("coolstop",coolstopWith,coolstopHeight,coolstopTop,coolstopLeft)
			}
		})
		
		// 缩放事件：resizable()
		// resize:监听缩放事件
		$("#cool").resizable({
			resize:function(e){
				const coolresizeWith = $(e.target)[0].clientWidth;
				const coolresizeHeight = $(e.target)[0].clientHeight;
				const coolresizeLeft = $(e.target)[0].offsetLeft;
				const coolresizeTop = $(e.target)[0].offsetTop;
				console.log("coolresize",coolresizeWith,coolresizeHeight,coolresizeLeft,coolresizeTop)
				
			}
		})
	}else if(currentLi == 'tab2'){
		$("#person").css({
			"display":"block"
		})
		$("#person").draggable({
			containment:".rightCon",
			cursor:"move",
			stop:function(e){
				const personstopWith = $(e.target)[0].clientWidth;
				const personstopHeight = $(e.target)[0].clientHeight;
				const personstopTop = $(e.target)[0].offsetTop;
				const personstopLeft = $(e.target)[0].offsetLeft;
				console.log("personstop",personstopWith,personstopHeight,personstopTop,personstopLeft)
			}
		})
		$("#person").resizable({
			resize:function(e){
				const personresizeWith = $(e.target)[0].clientWidth;
				const personresizeHeight = $(e.target)[0].clientHeight;			
				const personresizeLeft =       $(e.target)[0].offsetLeft;
				const personresizeTop = $(e.target)[0].offsetTop;
				console.log("personresize",personresizeWith,personresizeHeight,personresizeLeft,personresizeTop)
				
			}
		})
	}else{
		$("#nice").draggable()
		$("#nice").css({
			"display":"block"
		})
		$("#nice").draggable({
			containment:".rightCon",
			cursor:"move",
			stop:function(e){
				const nicestopWith = $(e.target)[0].clientWidth;
				const nicestopHeight = $(e.target)[0].clientHeight;
				const nicestopTop = $(e.target)[0].offsetTop;
				const nicestopLeft = $(e.target)[0].offsetLeft;
				console.log("nicestop",nicestopWith,nicestopHeight,nicestopTop,nicestopLeft)
			}
		})
		$("#nice").resizable({
			resize:function(e){
				const niceresizeWith = $(e.target)[0].clientWidth;
				const niceresizeHeight = $(e.target)[0].clientHeight;
				const niceresizeLeft = $(e.target)[0].offsetLeft;
				const niceresizeTop = $(e.target)[0].offsetTop;
				console.log("niceresize",niceresizeWith,niceresizeHeight,niceresizeLeft,niceresizeTop)
				
			}
		})
	}
})
</script>
	        

最后再补充一点：
元素视图属性：

offsetWidth: 水平方向width + 左右padding + 左右border；

offsetHeight： 垂直方向height + 上下padding + 左右border；

clientWidth： 水平方向width + 左右padding；

clientHeight： 垂直方向height + 上下padding；

offsetTop： 获取当前元素到定位父节点的left方向的距离；

offsetLeft： 获取当前元素到定位父节点的top方向的距离；

scrollWidth： 元素内容真实的宽度，内容不超出盒子宽度时为盒子的clientWidth;

scrollHeight： 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight；