包含可拖动表格的 HTML 全尺寸 div答案

【问题标题】：HTML full size div containing a draggable table包含可拖动表格的 HTML 全尺寸 div
【发布时间】：2017-05-14 14:10:50
【问题描述】：

我不知道如何解释我到底想要什么（这也让谷歌很难找到），但我想创建一个表格，每个单元格都有特定的宽度和高度（比如说 40x40 像素） .

这个表格将比视口大得多，所以它需要一些滚动，但我不想要滚动条（这部分不是问题），而是一种将表格拖到“视口后面”的方法.

为了使它更复杂一点，我需要能够使特定单元格居中并知道哪个单元格也居中（尽管如果我知道例如表格在左侧：-520px；我可以计算出情况是）。

长话短说，我正在寻找外观和工作方式类似于 maps.google.com 的东西，但使用的是表格和单元格，而不是画布或 div。

【问题讨论】：

没有示例代码我们将无济于事。
我明白，但实际上没有代码示例，因为没有代码。我正在尝试找到一个可行的概念，然后我将编写代码（我不希望有人编写我的任何代码）。我只是不知道从哪里开始。
我认为这个问题对于 Stack Overflow 来说太宽泛了。通常，您必须自己尝试一些事情，并在遇到困难时提出具体问题......
当我发布这个问题时，我有点害怕。我已经用 div 溢出等尝试了十几件事，但都不起作用，我只是希望我不是第一个坚持这个概念的人，或者有人想到了一些我没有看到的非常简单的事情，因为我已经被困在同一个圈子里好几天了。

标签： javascript html css draggable

【解决方案1】：

您想要实现的目标相对简单。您有一个容器 div 元素，其中 position: relative; overflow: hidden 通过 CSS 应用，内容设置为 position: absolute。例如：

<div class="wrapper">
    <div class="content-grid">
        ... your grid HTML ...
    </div>
 </div>

然后您需要设置一些鼠标/触摸跟踪 javascript，您可以在 Stack Overflow 或 Google 周围找到大量示例，它们会在 mousedown 或 touchstart 事件中监视鼠标的位置，然后在此重复测试查看指针位置的间隔并更新content-grid 顶部和左侧位置，直到mouseup 或touchend。

您可以使用左侧和顶部的 CSS 过渡使此动画平滑。

棘手的一点是计算中心单元的位置。为此，我建议计算一个中心区域，即容器元素中间的网格单元的大小（即 40x40）。然后检查当前是否有任何网格单元在该区域内超过 1/4，并将其视为“中心”元素。

以下是在包装器内的网格内定位单元格的基本示例：https://jsfiddle.net/tawt430e/1/

希望有帮助！

【讨论】：

【解决方案2】：

起初看到我的问题投了反对票，我有点失望。我可以想象 stackoverflow 有很多新人只是想在这里写他们的代码，但这不是我问的。

无论如何，以“你分享问题，你分享解决方案”的心态，我在 tw_hoff 的帮助下修复了代码，现在一切正常。它甚至将坐标保存在本地存储中，因此如果您刷新页面，此示例 HTML 将使您保持在相同的位置。我还添加了我使用的两个示例图像（左侧存储为farm.png，右侧存储为tile.png，与html页面相同的目录）。

实际代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Game map demo</title>
  <style>
      body { margin: 0; padding: 0; }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="map" style="position: absolute; overflow: hidden; width: 100%; height: 100%; background-color: darkgreen;">
    <div id="content" style="white-space: nowrap;">
    </div>
</div>

<script>
    for(i = 0; i < 20; i++) {
        for(j = 0; j < 20; j++) {
            var tile;

            if((i == 4 || i == 5) && (j == 2 || j == 3)) {
                tile = 'farm';
            } else {
                tile = 'tile';
            }

            $("#content").append('<div style="background: url(\'' + tile + '.png\'); width: 128px; height: 128px; position: absolute; margin-left: ' + (i * 128) + 'px; margin-top: ' + (j * 128) + 'px;"></div>');
        }
    }

    $("body").css("-webkit-user-select","none");
    $("body").css("-moz-user-select","none");
    $("body").css("-ms-user-select","none");
    $("body").css("-o-user-select","none");
    $("body").css("user-select","none");

    var down = false;
    var current_left = 0;
    var current_top = 0;

    if(localStorage.getItem("current_left") && localStorage.getItem("current_top")) {
        current_left = Number(localStorage.getItem("current_left"));
        current_top = Number(localStorage.getItem("current_top"));

        console.log(current_left);

        $("#content").css('marginLeft', (current_left) + 'px');
        $("#content").css('marginTop', (current_top) + 'px');
    }

    $(document).mousedown(function() {
        down = true;
    }).mouseup(function() {
        down = false;  
    });

    var cache_pageX;
    var cache_pageY;

    $( "#map" ).mousemove(function( event ) {
        if(down == true) {
            current_left += (-1 * (cache_pageX - event.pageX));
            if(current_left > 0)
                current_left = 0;

            if(current_left < (-2560 + $("#map").width()))
                current_left = (-2560 + $("#map").width());

            current_top += (-1 * (cache_pageY - event.pageY));
            if(current_top > 0)
                current_top = 0;

            if(current_top < (-2560 + $("#map").height()))
                current_top = (-2560 + $("#map").height());

            localStorage.setItem("current_left", current_left);
            localStorage.setItem("current_top", current_top);

            $("#content").css('marginLeft', (current_left) + 'px');
            $("#content").css('marginTop', (current_top) + 'px');
        }

        cache_pageX = event.pageX;
        cache_pageY = event.pageY;
    });
</script>

</body>
</html>

它仍然需要一些工作，当然还有很多工作要在游戏中实际使用，但这部分工作，我希望如果其他人可能有同样的问题并在 stackoverflow 上搜索它，我的解决方案会给他们朝着正确的方向前进:)。

感谢帮助的人！

【讨论】：