javascript - 我已经为外部 div 编写了代码，我可以在其中上下移动但无法左右移动

Question

请在附件中找到完整代码的链接。 我想平移外部 div 并且该 div 中的内容具有固定位置。 (功能就像谷歌地图平移一样)。

$(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 });
        }
    }
}).on('mouseup', function(e) {
    self.mouseDown = false;
});

});

提前致谢。 jsfiddle

Answer 1

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 更改

.innerdiv {
  position: fixed;
  z-index: 2;
  left: 20px;
  top: 20px;
}

检查这个fiddle .