点击图片放大可拖拽

<div>
	<ul>
		<li>
			<img class="comment_pics" width="50px" height="50px" src="img/ez.jpeg" />
			<p>号牌号码<span>豫Areceived</span></p>
			<p>号牌号码<span>豫Areceived</span></p>
			<p>号牌号码<span>豫Areceived</span></p>
		</li>
	</ul>
</div>
<div class="bg">
	<div class="oce" style="position: absolute;left: 30%;top: 25%;">
		<img class="bgImg" style="max-width: 100%; max-height: 100%;" src="">
	</div>
</div>

ul{
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: space-around;
}
li{
	width: 19%;
	height: 200px;
	margin: 10px;
	overflow-y: auto;
	border: 1px solid gainsboro;
	text-align: center;
	padding: 10px;
	/*隐藏下拉条开始*/
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;	
}
li::-webkit-scrollbar {width: 0 !important;}
	/*结束*/
li > img{
	width: 90%;
	height: 50%;
}
.bg{
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	display: none;
	/*消除双击事件选中样式开始*/
	-moz-user-select:none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/*结束*/
}
.oce{
	width: 40%;
	height: 60%;
	/* 图片等比使用
	transform: translateZ();
	 */
}
.oce > img{
	width: 100%;
	height: 100%;
}

//图片放大
		var Inimg;
		$("li>img").click(function(even) {
			console.log($(this)[0].src);
			Inimg = $(this)[0].src;
			$('.bgImg').attr('src', Inimg);
			$(".bg").css('display', "block");
			return false;
		})
		$(".bg").dblclick(function(even) {
			$(this).css('display', 'none');
			$('.bgImg').attr('src', '');
			$(".oce").css({
				"left": "30%",
				"top": "25%"
			});
			return false;
		})
		//拖拽
		$(".oce").mousedown(function(event) {

			if (event.button == 0) { //判断是否点击鼠标左键
				gapX = event.clientX - $(this).offset().left;
				gapY = event.clientY - $(this).offset().top;
				console.log(gapX);
				//movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
				$(document).bind("mousemove", move);
				//此处的$(document)可以改为obj  
				$(document).bind("mouseup", stop);

			}
			return false; //阻止默认事件或冒泡 
		});

		function move(event) {
			$(".oce").css({
				"left": (event.clientX - gapX) + "px",
				"top": (event.clientY - gapY) + "px"
			});
			return false; //阻止默认事件或冒泡  
		}

		function stop() {
			//解绑定，这一步很必要，前面有解释  
			$(document).unbind("mousemove", move);
			$(document).unbind("mouseup", stop);
		}