如何创建等距拖动＆amp;使用JavaScript删除网格？

Question

如何制作等距拖曳＆amp; drop Grid使用JavaScript将对象拖到网格上？

我开始使用WebGL（Three.js），但这不是一个好的解决方案（对我的目的没有真正的响应）。所以现在我考虑使用HTML Elements。

网格看起来像这样（只是最后的图像）

现在我只想获得一些方法（没有代码，只是想法）如何实现它：

• 网格为图像（如附图所示）
• 将对象从边栏拖入其中（1 * 1,2 * 2,3 * 3，...瓷砖大）
• 无法在同一个图块上放置两个重叠的对象

哪种方式可以做到？它也应该可以在移动设备上使用。

Answer 1

当然，你不应该期待这个问题的完整答案！但是这里有一些东西可以让你开始（在我个人觉得最有成效的方向）。

这是您的网格，但在html / css中，这意味着您现在可以轻松地与其进行互动。

http://jsfiddle.net/kqs0gq78/

它是一个简单的html / css网格;利用transform属性来获得3d效果。网格可以任意调整大小;现在有10行/列，网格是100x100，因此每个单元格是10x10。如果您决定需要更多单元格，则可能需要使用javascript生成html。如果添加更多单元格，您需要将css值更改为超过100x100大小。

您现在可以像通常使用javascript一样检测某些切片上的点击次数，开始检查悬停事件（这意味着用户拖动了切片），最后一旦用户释放了指示结束的点击拖动操作。

希望这很有用！ ：）

＆＃13;

＆＃13;

.wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
}
.wrapper:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.wrapper > .grid {
  display: inline-block;
  vertical-align: middle;
}
.grid > .row {
  font-size: 0;
  width: 100px;
  white-space: nowrap;
}
.grid > .row > .cell {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.3);
}
.grid > .row > .cell:hover {
  background-color: red;
}
.grid {
  transform: rotateX(40deg) rotateZ(45deg);
}

＆＃13;

<div class="wrapper">
  <div class="grid">
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;