包含可拖動表格的HTML全尺寸div

-1

我不知道如何解釋我確切需要的東西（這也使得Google很難），但是我想創建一個每個單元格都有特定寬度的表格和高度（比方說40x40像素）。包含可拖動表格的HTML全尺寸div

這張表會比視口大，所以它需要一些滾動，但我不想滾動條（這部分不是問題），而是一種拖動表格的方式「在視口後面」。

爲了讓它更復雜一些，我需要能夠將一個特定的單元格居中，並知道哪個單元格居中（儘管如果我知道例如該表格在左側：-520px;我可以計算出什麼情況是）。長期以來，我在尋找一些看起來像和maps.google.com一樣的東西，但後來用表格和單元格代替了畫布或div。

來源

2017-05-14 Cpt.Kangar00

沒有示例代碼，我們不會幫助。 – Oen44

我明白，但沒有代碼樣本，因爲沒有代碼。我試圖找到一個可以工作的概念，然後我會寫代碼（我不希望有人寫我的任何代碼）。我不知道從哪裏開始。 –

我認爲這個問題對於Stack Overflow來說太廣泛了。通常你必須自己嘗試一些東西，並在遇到困難時詢問具體問題... – Badacadabra

你想要達到的是相對簡單的。您有一個容器div元素，position: relative; overflow: hidden元素通過CSS應用並且內容設置爲position: absolute。例如：

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

然後，您需要設置一些鼠標/觸摸跟蹤JavaScript中，你可以找到大量的周圍堆棧溢出或谷歌，它監視鼠標的位置mousedown或touchstart事件，然後測試實例這在一個間隔上反覆查看指針所在的位置，並更新content-grid的頂部和左側位置，直到mouseup或touchend。

您可以使用左側和頂部的CSS過渡平滑動畫。

棘手的一點是計算中心單元的位置。爲此，我會推薦計算一箇中心區域，即您的容器元素中間的網格單元的大小（即40x40）。然後檢查該區域內是否有任何網格單元格大於1/4，並將其視爲「中心」元素。

這裏是位置一個基本的例子的包裝內的網格內的單元格：https://jsfiddle.net/tawt430e/1/

希望幫助！

來源

2017-05-14 14:55:26

我有點失望，首先看到我的問題的倒票。我可以想象，僅僅試圖讓他們的代碼寫在這裏的新人有很多問題，但這不是我問的問題。

無論如何，「你分擔問題，你分享解決方案」，心態，我在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上搜索它，我的解決方案給了他們一個正確的方向:)。

感謝那些幫助！

來源

2017-05-29 13:49:22

包含可拖動表格的HTML全尺寸div

回答

相關問題