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

#closures #draggable #google-closure-library

#замыкания #перетаскиваемый #google-closure-library

Вопрос:

Пожалуйста,

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

Пример: в jQueryUI есть опция grid:


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

Ответ №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});