Question

我有一个问题在javascript中创建简单的块拼图游戏。我试图将元素捕捉到网格，但如果我的元素突破了声明为可放置的网格限制，我无法弄清楚如何限制丢弃。

我创造了一个小提琴：Angular.io

我使用此代码：

HTML：

JS：

    <div class="row">
        <div class="cell">&nbsp;</div>
        <div class="cell">&nbsp;</div>
        <div class="cell">&nbsp;</div>
        <div class="cell">&nbsp;</div>
        <div class="cell">&nbsp;</div>
    </div>

    <div class="element drag"> </div>

如何解决在网格中定位元素的问题，如果元素超出网格，或者如果它超过不可丢弃的单元格（如果我们假设我们已经在单元格中有一些丢弃的元素），则会阻止掉线？

此外，我遇到了HandleElementDrop函数和draggable的位置问题，它总是将元素一个单元格放在与删除单元格相关的位置。

Answer 1

所以我提出了DEMO一些建议。

尝试将grid属性设置为100x100网格，而不是捕捉到.cell：

$('.drag').draggable({ snap: ".gameGrid", grid: [100,100]});

同时更改.element的尺寸以考虑边框的1px：

.cell { 
  border-right: 1px solid #000000; 
  border-bottom: 1px solid #000000; 
  float: left; 
  width: 99px; 
  height: 99px; 
}

如果边界在.gameGrid之外，为了忽略掉落，您可以使用event.position属性在handleElementDrop方法上写入更多逻辑。

如何将可拖动项目捕捉到受限容器

1 个答案: