Jquery ui jquerydraggable：释放鼠标后是否可以捕捉到网格？

基本上，我希望使用“栅格”选项将可拖动的div捕捉到30 x 30栅格，但我希望保持拖动平滑。那么，有没有一种方法可以在鼠标释放（或类似的操作）时捕捉到网格呢？

如果这就是您想要对网格执行的所有操作，您可以模拟它：

$("#myobj").draggable({
  ...
  stop: function(event, ui) {
    t = parseInt($(this).css(top);
    l = parseInt($(this).css(left);
    $(this).css(top , t - t % 30);
    $(this).css(left, l - l % 30);
  }
  ...
});

对@Zed的更正 这将使用中心来决定将其放置在哪个网格中。有史以来最拖拉的是它去

stop: function(e, ui) {
    var grid_x = 30;
    var grid_y = 30;
    var elem = $( this );
    var left = parseInt(elem.css('left'));
    var top = parseInt(elem.css('top'));
    var cx = (left % grid_x);
    var cy = (top % grid_y);

    var new_left = (Math.abs(cx)+0.5*grid_x >= grid_x) ? (left - cx + (left/Math.abs(left))*grid_x) : (left - cx);
    var new_top = (Math.abs(cy)+0.5*grid_y >= grid_y) ? (top - cy + (top/Math.abs(top))*grid_y) : (top - cy);

    ui.helper.stop(true).animate({
        left: new_left,
        top: new_top,
        opacity: 1,
    }, 200);
},

尝试过渡 我刚刚发现的一点很好的东西是，如果你给被拖动的元素提供了transition的css属性，它将对它捕捉到网格的速度产生影响

$（函数（）{
$（“.draggable”）.draggable({
遏制：“窗口”，
网格：[30,30]
});
});
.draggable{
背景：#333；
颜色：白烟；
字体系列：“无衬线”、“arial”；
填充物：5px12px；
显示：内联块；
过渡：顶部0.05秒缓进-缓出，左侧0.05秒缓进-缓出
}

拖我