在chrome中拖动元素的问题

Question

这些是我的javascript，css和html文件，用于拖动元素并将其放入容器（div）的简单网页：

var xContainer;
var yContainer
var insideFirst = false;
$(window).load(
        function() {
            xContainer = $("#center").offset().left;
            yContainer = $("#center").offset().top;
            console.log("ready");
            $("#center").on("click", function(event) {
                console.log(event);
            });
            $("#center").droppable();
            $("#firstID").draggable({
                cursor : 'move',
                revert: "invalid"
            });
            $("#firstID").mousedown(function() {
                isDragging = false;
            }).mousemove(
                    function() {
                        isDragging = true;
                        var x = $("#firstID").offset().left;
                        var y = $("#firstID").offset().top;
                        xContainer = $("#center").offset().left;
                        yContainer = $("#center").offset().top;
                        var xPosition = (x - xContainer).toFixed(2);
                        var yPosition = (y - yContainer).toFixed(2);
                        console.log("center:" + xContainer);
                        console.log("x:" + x);
                        console.log("difference: "+(x-xContainer));
                        /*
                         * if (x < 750 && y < 750) {
                         * $("#firstID").css('background','#ffffff') }
                         */
                        if (xPosition >= 0.0 && yPosition >= 0.0
                                && xPosition <= 500.0 && yPosition <= 200.0) {
                            $("#xPosition").val("x:" + xPosition);
                            $("#yPosition").val("y:" + yPosition);
                            $("#firstID").css('background', '#e4e4e4')
                            $('#firstID').draggable({containment : [xContainer,yContainer,xContainer+500,yContainer+200.0] });
                        } else {
                            //$("#xPosition").val("GO IN!!!");
                            //$("#yPosition").val("GO IN!!!");
                            $("#firstID").css('background', '#d1f1fc')
                        }

                    }).mouseup(function() {
                var wasDragging = isDragging;
                isDragging = false;
                if (!wasDragging) {
                    console.log("clicked");
                }

            });
            $("#secondID").draggable({
                cursor : 'move'
            });
            $("#secondID").mousedown(function() {
                isDragging = false;
            }).mousemove(function() {
                isDragging = true;
                var x = $("#secondID").offset().left;
                var y = $("#secondID").offset().top;
                // $("#text-x").val ("x:"+x);
                // $("#text-y").val ("y:"+y);
            }).mouseup(function() {
                var wasDragging = isDragging;
                isDragging = false;
                if (!wasDragging) {
                    console.log("clicked");
                }

            });
            $("#secondID").dblclick(function() {
                rotation += 90;
                $(this).rotate(rotation);
            });
        });
jQuery.fn.rotate = function(degrees) {
    $(this).css({
        '-webkit-transform' : 'rotate(' + degrees + 'deg)',
        '-moz-transform' : 'rotate(' + degrees + 'deg)',
        '-ms-transform' : 'rotate(' + degrees + 'deg)',
        'transform' : 'rotate(' + degrees + 'deg)'
    });
    return $(this);
};
var rotation = 0;
var isDragging = false;

body {
    height: 100%;
    background-color: #e4e4e4;

}

#firstID {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-style: groove;
    background-color: #d1f1fc;
    color: black;
    position: relative;
    text-align: center;
    z-index: 99;
}

#secondID {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    color: black;
    border-style: groove;
    position: relative;
    background-color: #d1f1fc;
    text-align: center;
    z-index: 99;
}

#center {
    width: 600px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    border-style: groove;
    background-color: #c0c0c0;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
@media only screen and (max-width: 479px) {
    #center{
        width: 50%;
        height : 50%;
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="drag.css">
</head>
<body>
<input type="text" id="xPosition" value="x:0">
<input type="text" id="yPosition" value="y:0">
<div id="firstID" >MJ</div>
<div id="secondID" >MJ</div>
<div id="center">
</div>
</body>
</html>

代码未完成，因此逻辑仅使用正方形，而不是矩形。 我需要的是将方形元素拖到页面上的容器中并使其保持在其中，不可能离开它。这在Mozilla中运行良好，但在Chrome中，我在输入容器后拖动方块时遇到问题。当我点击它并尝试拖动它时，它会移动到页面的右侧。为什么只在Chrome中发生这种情况？