(НОТА: Некоторые задавали похожие вопросы, но были слишком конкретными и не дали никаких полезных ответов)

Перетаскиваемый виджет пользовательского интерфейса jQuery имеет опции для привязки к сетке, но нет способа установить, к чему эта сетка относится.

Например, у нас есть четко определенная сетка 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 Draggable?