jQuery可拖动，只能在父级内捕捉到网格

Question

-------------------------------
|                             |
|             box             |
|                             |
-------------------------------

---------
| thing |
---------

我希望thing能够被自由拖动，直到它被拖入box。当它在box内被拖动时，我想让它捕捉到一个网格（例如20px * 20px）。

我该怎么做？

Answer 1

您可以使用containment选项，如下所示

$( ".selector" ).draggable({
  containment: "parent"
});

或者您可以在fiddle。

中进行如下设置

$('#floor').droppable({
    tolerance: 'fit'
});

$('#drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('#drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});