Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[cdk-drag-drop] Support snap effect. #15471

Flashunt opened this Issue Mar 14, 2019 · 0 comments


None yet
2 participants
Copy link

Flashunt commented Mar 14, 2019

Please describe the feature you would like to request. , in this example, the draggable element has snapping effect when dragged. Please support this effect, with some @input.

What is the use-case or motivation for this proposal?

I has more standalone draggable element, and need this snapping effect, that the user will can drop the elements exactly next to each other. And without this effect is so hard. But with this effect he can drag the elements with 4 or 8 or (n pixels) distance only.

Is there anything else we should know?

I made a little research, and i think this isn't a hard thing:
With an @input value can overwrite the function getTransform like this:

private _initialSnapEffect?: number;

function getTransform(x: number, y: number): string {
  // Round the transforms since some browsers will
  // blur the elements for sub-pixel transforms.
  // Need this Round before calculate the snap effect.
  x = Math.round(x);
  y = Math.round(y);
  // If have initialSnapEffect, then the translate effect only will change if the input x and y can 
  // divided with this._initialSnapEffect number and no remainder.
  if (this._initialSnapEffect) {
     if (x % this._initialSnapEffect !== 0) {
        x = (x - (x % this._initialSnapEffect));
     if (y % this._initialSnapEffect !== 0) {
        y = (y - (y % this._initialSnapEffect));
  return `translate3d(${x}px, ${y}px, 0)`;

@crisbeto crisbeto self-assigned this Mar 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.