如何使用JavaScript创建等距拖放网格？

如何使用等距拖放Grid使用JavaScript将对象拖动到网格上？

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

网格看起来像这样(最后只是一个图像)

现在我只想获得一些方法(没有代码,只是想法)如何实现它:

网格作为图像(如附图)

将对象从边栏拖动到其中(1*1,2*2,3*3,...瓷砖大)

无法在同一个磁贴上放下两个重叠的对象

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

当然你不应该期待这个问题的完整答案!但这里有一些东西让你开始(我个人认为最有成效的方向).

这是你的网格,但在html/css中,这意味着你现在可以轻松地与它进行交互.

http://jsfiddle.net/kqs0gq78/

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

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

希望这很有用!:)

.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);
}