6

jQuery UI Draggable は、grid設定すると、ドラッグ可能な要素をグリッドにスナップするオプションを提供します。これで私が抱えている唯一の問題は、スナップする前にアニメーション化したいということです。

私のグリッドの場合[500,500]、マウスが 500px の距離をカバーするまで、ユーザー フィードバックはありません。

同様の「グリッドへのスナップ」を行うだけでなく、同時にアニメーション化することは可能ですか?

4

1 に答える 1

8

ユーザーがドラッグを終了した後、グリッドにスナップしたいということだと思います。この場合、ドラッグ可能なstopイベントを利用して、要素のオフセットを計算できます。

左上隅であるオフセット (0, 0) から始まる、親要素内に含まれるドラッグ可能要素があるとします。次に、通常のドラッグ可能な効果を要素に適用し、stopその位置を計算して最も近い「セル」にスナップします。

このコードは次のようになります。

$(el).draggable({
  stop: function(e, ui) {
    var elem = ui.helper,
        left = elem.position().left,
        top  = elem.position().top;

    elem.css({
      left: left - (left%10),
      top: top - (top%10)
    });
  }
});

このコードは、要素の左上のピクセル座標に基づいて常にスナップし、要素が絶対的に配置され、親が静的に配置されていない (相対、絶対など) ことに依存します。

** 編集 **

簡単なデモを作成しました - http://jsfiddle.net/LQwMe/1/

于 2011-04-09T14:26:59.477 に答える