Question

我有两个容器。缩略图容器和“页面”容器。两者都是div。可以在两个容器之间来回拖动缩略图。我已将缩略图设置为“无效”，因此如果它们被丢弃到其中任何一个容器之外，它们会快速回到其中一个容器中。

缩略图必须与“页面”容器内的20x20网格对齐。这是客户端，客户端可以将缩略图放在任何地方的“页面”容器中，但仍然能够整齐地排列它们。

问题是可拖动的'网格'选项似乎对此没有太好用。当您开始拖动时，“网格”似乎由可拖动位置决定，而不是表现为页面具有可以捕捉到的真实网格。

有没有办法解决这个问题，以便网格基于“页面”容器，而不是拖动它时拖动的位置？

Answer 1

检查Jquery UI站点上的捕捉示例：

http://jqueryui.com/demos/draggable/#snap-to

您可以采用相同的示例并指定网格和捕捉参数。

然后快照将基于快照选择器的左上角。

$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });

Jquery站点上的示例现在将“80x80”框基于大容器进行捕捉。

在你的情况下，最简单的方法是创建一个100％宽度和高度的div，然后将snap：selector（使用css选择器）设置为该div，然后指定要捕捉到的网格...

祝你好运

Answer 2

也许你可以尝试使用draggable上的start事件将起始位置舍入到最接近的20像素。

像（未经测试的......）：

$('#draggable').draggable(
    {snap : grid: [20,20]},
    {start : function(event, ui) {
        var startPosition = $(ui.draggable).position(); 
        $(ui.draggable).css({
            'left' : (Math.round(startPosition.left/20)*20)+'px',
            'top' : (Math.round(startPosition.top/20)*20)+'px'});
        }
    }
);

我正在努力实现这一目标，但我正在将拖动的元素克隆到另一个容器中，这样更加棘手;-) 我仍然需要弄清楚如何在启动事件中设置助手的位置......

当然，只有在起始位置已经是绝对位置时（如拖动时），它才会起作用。

事实上，通过将此方法应用于stop事件并删除grid属性，我几乎实现了它。

当移动物体时，你没有得到任何视觉反馈，因为它本身没有网格本身，但是当它丢弃时，它会进入你自己的网格：

stop: function(event, ui)   {
    var stopPosition = $(ui.draggable).position();
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'});
}

这是一个有效的例子： http://jsfiddle.net/qNaHE/3/

jQuery UI Draggable，捕捉到网格

2 个答案: