图片拖动放大缩小

<link rel="stylesheet" type="text/css" href="/Public/Css/jquery-ui.css" />
<style type="text/css">
	.mainnav_title {
		display: none;
	}


	.box {
		display: inline-block;
		/* width: 750px; */
		/* height: 2190px; */
		/* overflow: hidden; */
		position: relative;
	}

	.box .move {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
	}

	.box .move img {
		width: 100%;
		height: 100%;
	}
</style>

<form class="layui-form" action="">
	<button class="layui-btn" lay-submit lay-filter="formDemo">保存图片位置</button>
</form>

<div class="box">
	<img src="{$info.thumb}" alt="" />

	<div class="move ui-widget-content ui-resizable"
		style="width: {$info.dst_width}px;height: {$info.dst_height}px;top: {$info.dst_y}px;left: {$info.dst_x}px;inset: {$info.dst_y}px auto auto {$info.dst_x}px;">
		<img src="/code.jpg" alt="" />
	</div>
</div>

<script src="/Public/Js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function () {
		$('.box .move').each(function () {
			$(this).draggable({
				containment: '.box',
				cursor: 'move',
			});

			$(this).resizable({
				containment: '.box',
				aspectRatio: true,
			});
		});

		//Demo
		layui.use('form', function () {
			form = layui.form;

			//监听提交
			form.on('submit(formDemo)', function (data) {
				// layer.msg(JSON.stringify(data.field));
				$.post(
					'', {
						dst_width: $('.move').width(),
						dst_height: $('.move').height(),
						dst_y: $('.move').css('top'),
						dst_x: $('.move').css('left'),
					},
					function (params) {
						// console.log(params);
						layer.msg('保存成功', {
							icon: 1
						});
					},
					'json'
				);
				return false;
			});
		});
	});
</script>