jquery - 让 jQuery 可拖动以捕捉到特定网格

Question

(注意: 有些人提出了类似的问题，但过于具体，没有得到可用的答案)

jQuery UI 的可拖动小部件具有用于捕捉到网格的选项，但无法设置网格的相对位置。

例如，我们的放置目标中有一个明确定义的 20x20 网格。在放置目标内从 0,0 开始的拖动项目将与网格对齐。但是从不同位置或放置目标之外开始的拖动项目将不会与该网格对齐。

<强> http://jsfiddle.net/FNhFX/5/

HTML:

<div class="drop-target">
    <div class="drag-item">Drag me</div>
    <div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>

JS:

$(function() {
    $(".drag-item").draggable({
        grid: [20, 20]
    });
    $(".outside-drag-item").draggable({
        grid: [20, 20],
        helper:"clone"
    });
    $(".drop-target").droppable({
        accept: ".drag-item"
    });
});

有任何方法使用 jQuery 可拖动来捕捉到特定网格吗？

Answer 1

我也将继续在这里发布答案，尽管我是通过a followup question you asked来到这里的。 .

您可以在 jQuery UI 可拖动的 drag 事件中轻松创建自己的对齐网格功能。

基本上，您想要检查在可拖动对象被拖动到网格的任何点上当前 ui 位置的接近程度。该接近度始终可以表示为位置除以网格的余数。如果该余数小于或等于 snapTolerance，则只需将位置设置为没有该余数的位置即可。

用散文来说这很奇怪。代码中应该更清楚:

Live Demo

// Custom grid
$('#box-3').draggable({
    drag: function( event, ui ) {
        var snapTolerance = $(this).draggable('option', 'snapTolerance');
        var topRemainder = ui.position.top % 20;
        var leftRemainder = ui.position.left % 20;

        if (topRemainder <= snapTolerance) {
            ui.position.top = ui.position.top - topRemainder;
        }

        if (leftRemainder <= snapTolerance) {
            ui.position.left = ui.position.left - leftRemainder;
        }
    }  
});