WebContent/WEB-INF/jsp/pc/poster/coordinate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置坐标</title>
    <link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_9lmlt21w1lv26gvi.css">
    <style>
        body{
            margin: 0;
            padding: 0;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none;  /*webkit浏览器*/
            -ms-user-select: none;   /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }
        .haibao-view{
            display: inline-block;
            min-width:300px;
            min-height:600px;
        }
        .haibao-view img{
        	border:1px solid #ddd;
        	
        }
        .box {
            cursor: move;
            background-color: #FFF;
            border: 1px solid #CCCCCC;
        }
        
        #box {
            width: 160px;
            height: 160px;
            position: absolute;
            top: 0px;
            left: 100px;
            background: url(/zzhnc/res/images/code.png);
            background-size: 100% 100%;
        }
        
       
        .coor {
            overflow: hidden;
            cursor: se-resize;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="haibao-view">
        <button class="layui-btn" style="position:fixed;top:20px;right:20px;z-index:10">保存</button>
        <img src="/zzhnc/res/images/1.jpg" alt="">
        <div id="box" class="box">
            <div id="coor" class="coor"><span class="iconfont icon-suofang"></span></div>
        </div>
       
    </div>
   <script src='/zzhnc/res/js/jquery.min.js'></script>
    <script>
    

    var qrH = window.parent.qrH || 160
    var qrW = window.parent.qrW || 160
    var qrX = window.parent.qrX || 100
    var qrY = window.parent.qrY || 0
    $("#box").css({"width":qrW,"height":qrH,"top":qrY,"left":qrX})
   	$(".haibao-view img").attr("src",  $("input[name=postertemplet]",window.parent.document).val() || "../res/images/1.jpg")
    
    $(function () {
        $(document).mousemove(function (e) {

            if (!!this.move) {

                var posix = !document.move_target ? { 'x': 0, 'y': 0 } : document.move_target.posix

                var callback = document.call_down || function () {

                    if (this.move_target.id == "box") {
                        qrY = Math.max(e.pageY - posix.y  , 0)
                        qrY = Math.min(qrY,$(".haibao-view").height()-qrH)
                        qrX = Math.max(e.pageX - posix.x  , 0)
                        qrX = Math.min(qrX,$(".haibao-view").width()-qrW)
                        
                        $("#box").css({
                            'top': qrY ,
                            'left': qrX 
                        });
                    }

                };

                callback.call(this, e, posix);
            }
        }).mouseup(function (e) {

            if (!!this.move) {
                var callback = document.call_up || function () { };
                callback.call(this, e);
                $.extend(this, {
                    'move': false,
                    'move_target': null,
                    'call_down': false,
                    'call_up': false
                });
            }
        });

        var $box = $('#box').mousedown(function (e) {
            var offset = $(this).offset();

            this.posix = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };

            $.extend(document, { 'move': true, 'move_target': this });


        }).on('mousedown', '#coor', function (e) {
            var posix = {
                'w': $box.width(),
                'h': $box.height(),
                'x': e.pageX,
                'y': e.pageY
            };

            $.extend(document, {
                'move': true, 'call_down': function (e) {
                    qrW = Math.max(30, e.pageX - posix.x + posix.w)
                    qrW = Math.min(qrW,$(".haibao-view").width() - qrX)
                    qrH = Math.max(30, e.pageY - posix.y + posix.h)
                    qrH = Math.min(qrH,$(".haibao-view").height() - qrY)
                    qrH = qrW
                    qrW = qrH
                    $box.css({
                        'width': qrW,
                        'height': qrH
                    });
                    
                }
            });
            return false;
        });


        $("button").click(function(){
        	window.parent.layer.close(window.parent.layers)
            $("input[name=qrX]",window.parent.document).val(qrX)
            $("input[name=qrY]",window.parent.document).val(qrY)
            $("input[name=qrWidth]",window.parent.document).val(qrW)
            $("input[name=qrHeight]",window.parent.document).val(qrH)
            window.parent.aa = [qrX,qrY,qrH,qrW]
        })
    });
    </script>
</body>


</html>