closures - ドラッグした要素を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});