使用 Google 闭包库对齐拖动元素的网格

Question

请问，

如何在 Google Closure Library 中制作可拖动元素并对齐网格？

示例：jQueryUI 有选项网格：

$(".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);
}

然后，您将按照与 goog.ui.Dragger 相同的方式使用 SnapDragger

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