Привязка к сетке перетаскиваемого элемента с помощью библиотеки Google Closure

Question

Пожалуйста,

как сделать в Google Closure Library перетаскиваемый элемент и привязать к сетке?

Пример: jQueryUI имеет сетку опций:

<code>$(".selector").draggable({grid: [50, 20]});

Answer 1

Мне нужно было сделать это в моем проекте, поэтому выкладываю решение (хотя я уверен, что их много). Мой подход заключался в наследовании класса goog.fx.Dragger и расширении:

• конструктор для поддержки параметров сетки
• действие по умолчанию для фактической привязки

Код следует:

SnapDragger = function(target, grid, opt_handle, opt_limits) {
  goog.base(this, target, opt_handle, opt_limits);
  this.grid = grid;
}
goog.inherits(SnapDragger, goog.fx.Dragger);

SnapDragger.prototype.defaultAction = function(x, y) {
  x = Math.round(x / this.grid.x) * this.grid.x;
  y = Math.round(y / this.grid.y) * this.grid.y;
  goog.base(this, 'defaultAction', x, y);
}

Затем вы бы использовали SnapDragger так же, как goog.ui.Dragger

var dragger = new SnapDragger(element, {x: 20, y: 50});