Javascript 我已经为outerdiv编写了代码，在这里我可以上下移动，但不能左右移动

请找到完整代码的附件链接。 我想平移外部div，该div中的内容具有固定位置。 （功能类似于谷歌地图平移）

}))

---

提前谢谢

Html结构更改

<div class="outterdiv">


</div>
<div class="innerdiv">
  <form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
</div>

---

检查这个。

我想这就是你想要的现在您可以上下左右移动了

CSS:

.outterdiv {
     /* width:2160px; 
      height:3840px; it's remove for clear visualization, you can add it again 
     */ 
      position:absolute;
      background: lightblue;
      //background: url(http://2.bp.blogspot.com/-cdv-Dxy474A/UWMjoBq_vuI/AAAAAAAAFIs/Z4QycYcrkUg/s1600/green-background-pattern-with-warped-vertical-stripes.jpg) left top repeat;
}

    $(document).ready(function() {
    var self = {};

    $('div').on('mousedown', function(e) {
        self.panStartX = e.pageX;
        self.panStartY = e.pageY;
        self.mouseDown = true;
        self.pageTop = parseInt($(this).css('top'), false) || 20;
        self.pageLeft = parseInt($(this).css('left'), false) || 10;
    }).on('mousemove', function(e) {
        if (self.mouseDown) {
            var pageTop = self.pageTop;
            var pageLeft = self.pageLeft;
            self.panEndX = e.pageX;
            self.panEndY = e.pageY;

            if (self.panStartY > self.panEndY) {
                self.panTop = self.panEndY - self.panStartY;
                pageTop+= self.panTop;
                $(this).css({ top: pageTop });
            } else {
                // Down
                self.panTop = self.panStartY - self.panEndY;

                pageTop-= self.panTop;
                if (pageTop > 42) pageTop = 42;

                $(this).css({ top: pageTop });
            }




            if (self.panStartX > self.panEndX) {
               self.pageLeft = self.panStartX - self.panEndX;                
                pageLeft-= self.pageLeft;              

                $(this).css({ left: pageLeft });
            } else {
                // right

                 self.pageLeft = self.panEndX - self.panStartX;
                pageLeft+= self.pageLeft;
                if (pageLeft > 42) pageLeft = 42;

                $(this).css({ left: pageLeft });
            }
        }
    }).on('mouseup', function(e) {
        self.mouseDown = false;
    });
});

jQuery:

.outterdiv {
     /* width:2160px; 
      height:3840px; it's remove for clear visualization, you can add it again 
     */ 
      position:absolute;
      background: lightblue;
      //background: url(http://2.bp.blogspot.com/-cdv-Dxy474A/UWMjoBq_vuI/AAAAAAAAFIs/Z4QycYcrkUg/s1600/green-background-pattern-with-warped-vertical-stripes.jpg) left top repeat;
}

    $(document).ready(function() {
    var self = {};

    $('div').on('mousedown', function(e) {
        self.panStartX = e.pageX;
        self.panStartY = e.pageY;
        self.mouseDown = true;
        self.pageTop = parseInt($(this).css('top'), false) || 20;
        self.pageLeft = parseInt($(this).css('left'), false) || 10;
    }).on('mousemove', function(e) {
        if (self.mouseDown) {
            var pageTop = self.pageTop;
            var pageLeft = self.pageLeft;
            self.panEndX = e.pageX;
            self.panEndY = e.pageY;

            if (self.panStartY > self.panEndY) {
                self.panTop = self.panEndY - self.panStartY;
                pageTop+= self.panTop;
                $(this).css({ top: pageTop });
            } else {
                // Down
                self.panTop = self.panStartY - self.panEndY;

                pageTop-= self.panTop;
                if (pageTop > 42) pageTop = 42;

                $(this).css({ top: pageTop });
            }




            if (self.panStartX > self.panEndX) {
               self.pageLeft = self.panStartX - self.panEndX;                
                pageLeft-= self.pageLeft;              

                $(this).css({ left: pageLeft });
            } else {
                // right

                 self.pageLeft = self.panEndX - self.panStartX;
                pageLeft+= self.pageLeft;
                if (pageLeft > 42) pageLeft = 42;

                $(this).css({ left: pageLeft });
            }
        }
    }).on('mouseup', function(e) {
        self.mouseDown = false;
    });
});

这里是预览链接：

---

更新带有您的评论请求的链接：

我希望平移外部div并将内容保留在其位置使用静态内容更新链接：如果您需要更多更改，请告诉我。抱歉，这不是我想要的，我希望平移画布