如何捕捉可拖动项目到有限的容器

How to snap draggable item to limited container

本文关键字：何捕捉 拖动 项目      更新时间：2023-09-26

我在javascript中创建简单的方块益智游戏时有一个问题。我试图捕捉元素到网格，但我不知道如何限制下降，如果我的元素打破了网格的限制，被声明为可掉落。

我已经创建了一个小提琴:demo

我使用以下代码:

html: 

    <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>

JS: 

$( init );
function init() {
  $('.drag').draggable({ snap: ".cell", revert: "invalid" });
  $('.cell').droppable({
      drop: handleElementDrop
  });
}
function handleElementDrop( event, ui ) {
    dragger = ui.draggable;
    dragger.draggable( 'disable' );
    $(this).droppable( 'disable' );
    dragger.position( { of: $(this), my: 'left top', at: 'left top' } );
    dragger.draggable( 'option', 'revert', false );
}

如何解决在网格中定位元素的问题，如果元素在网格之外，或者如果它超过不可掉落的单元格(如果我们假设我们已经在单元格中有一些掉落的元素)，则防止掉落元素?

我也有问题与HandleElementDrop函数和位置的可拖放，它总是把元素一个单元格的权利相对于被拖放的单元格。

所以我做了一个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之外，为了忽略drop，您可以使用event.position属性在handleElementDrop方法上编写更多逻辑。

相关文章：