JQuery UI Draggable, привязка к сетке

У меня есть два контейнера. Эскизный контейнер и контейнер "страница" . Оба являются div. Миниатюры можно перетаскивать назад и вперед между двумя контейнерами. Я вернусь к миниатюрам, установленным как "недействительный", поэтому они привязаны к одному из двух контейнеров, если они выбрасываются за пределы одного из них.

Миниатюры должны привязываться к сетке 20x20 внутри контейнера "страница" . Это так клиент клиент может помещать миниатюры в контейнер "страницы" в любом месте, но все равно сможет выстроить их аккуратно.

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

Есть ли способ исправить это, поэтому сетка основана на контейнере "страница" , а не на позиции перетаскиваемого, когда вы начинаете перетаскивать его?

ОТВЕТЫ

Ответ 1

Проверьте пример привязки на веб-сайте JQuery:

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

Вы можете взять тот же пример и указать как сетку, так и параметр привязки.

Затем привязка будет основана на верхнем левом углу селектора привязок.

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

Пример на сайте JQuery теперь позволит привязать поле "80x80" к большому контейнеру.

В вашей ситуации было бы проще создать div со 100% шириной и высотой, а затем установить привязку: селектор (с помощью селекторов CSS) к этому div, а затем задать сетку для привязки к...

Удача

Ответ 2

Возможно, вы могли бы попытаться округлить начальную позицию до ближайших 20 пикселей, используя начальное событие на перетаскиваемом.

Что-то вроде (untested...):

$('#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: 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/