Получение 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" 
    }); 
}); 

Есть any Способ привязки к определенной сетке с использованием jQuery draggable?

Answer 1

Я также собираюсь ответить и здесь, хотя я пришел сюда через a followup question you asked.

Вы можете создать свою собственную функцию привязки к сетке очень легко внутри события drag на jQuery UI draggable.

В принципе, вы хотите проверить, насколько текущая позиция 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; 
     } 
    } 
}); 

Answer 2

В качестве альтернативы, чтобы пытаться использовать сетки опцию в JQuery UI, я создал свою собственную сетку (что можно сделать видимыми или невидимым с использованием css), затем используйте опцию snap и укажите класс каждой из моих линий сетки.

К исходному jsfiddle, я добавил следующие CSS:

.gridlines { 
display: none; 
position:absolute; 
background-color:#ccc; 
} 

и следующий JavaScript:

function createGrid(size) { 
    var i, 
    sel = $('.drop-target'), 
     height = sel.height(), 
     width = sel.width(), 
     ratioW = Math.floor(width/size), 
     ratioH = Math.floor(height/size); 

    for (i = 0; i <= ratioW; i++) { // vertical grid lines 
    $('<div />').css({ 
     'top': 0, 
     'left': i * size, 
     'width': 1, 
     'height': height 
    }) 
     .addClass('gridlines') 
     .appendTo(sel); 
    } 

    for (i = 0; i <= ratioH; i++) { // horizontal grid lines 
    $('<div />').css({ 
     'top': i * size, 
     'left': 0, 
     'width': width, 
     'height': 1 
    }) 
     .addClass('gridlines') 
     .appendTo(sel); 
    } 

    $('.gridlines').show(); 
} 

createGrid(20); 

Вот является jsFiddle (http://jsfiddle.net/madstop/46sqd/2/)