Получение jQuery draggable для привязки к определенной сетке

(Примечание: некоторые задавали подобные вопросы, но были слишком конкретными и не дали никаких полезных ответов)

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

например, у нас есть четко определенная сетка 20x20 в нашей цели падения. Элемент перетаскивания, который начинается с 0,0 в пределах цели перетаскивания, будет щелкать в соответствии с сеткой. Но элемент перетаскивания, который начинается с другого местоположение или вне цели падения не будет соответствовать этой сетке.

enter image description here

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?

13
jquery jquery-draggable jquery-ui

2 ответов

Я собираюсь пойти вперед и опубликовать ответ здесь, хотя я пришел сюда через контрольный вопрос, который вы задали.

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

в принципе, вы хотите проверить, насколько близка текущая позиция пользовательского интерфейса в любой момент, когда перетаскиваемый перетаскивается в сетку. Эта близость всегда может быть представлена как остаток позиции, разделенный на сетка. Если этот остаток меньше или равен 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;
        }
    }  
});
17

в качестве альтернативы попытке использовать решетки опция в 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/)

4