HTML 全尺寸 div 包含可拖动的 table

Question

我不确定如何解释我到底想要什么（这也让 google 变得非常困难），但我想为每个单元格创建一个 table特定的宽度和高度（假设为 40x40 像素）。

这个 table 将比视口大很多，所以它需要一些滚动，但我不想要滚动条（这部分不是问题），而是一种拖动 table 大约 "behind the viewport".

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

长话短说，我正在寻找外观和工作方式与 maps.google.com 类似的东西，但它带有 table 和单元格，而不是 canvas 或 div。

Answer 1

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

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

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

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

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

这是一个基本示例，用于在包装器内的网格内定位单元格：https://jsfiddle.net/tawt430e/1/

希望对您有所帮助！

Answer 2

一开始看到我的问题被否决，我有点失望。我可以想象 Whosebug 有很多问题，新人只是想在这里编写他们的代码，但这不是我问的。

无论如何，凭借 "you share the problem, you share the solution" 的心态，我在 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>

它仍然需要一些工作，当然还有很多工作要在游戏中实际使用，但这部分有效，我希望如果其他人可能遇到同样的问题并在 Whosebug 上搜索我的解决方案给他们一个正确的方向的推动 :).

感谢那些提供帮助的人！

HTML 全尺寸 div 包含可拖动的 table

HTML full size div containing a draggable table

html

javascript

css

draggable