How to snap with Y.Plugin.Resize

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Ventzy Kunev

Username: Ventzy
Joined: Thu Nov 05, 2009 2:41 am
Posts: 35

Tags:

How to snap with Y.Plugin.Resize

Posted: Fri Apr 20, 2012 4:28 pm

+0-

I have Node with Y.Plugin.Resize. I want to create snap on resizing when dragged edge is "close" to some coordinate (this is "snap to guide" functionality of Photoshop).

For example, I have square on (200,200) with dimensions 300px x 300px. Start to drag left handle to the left. When square's left is between 90px and 110px I want to be snapped to 100px, so the square will be on (100, 200) with size 400x300. If cursor continue to move to the left and passes 90th px - square to resize normally - pixel-by-pixel.

I looked at ResizeConstrained and DDConstrained and their ticks snap, but could not found how to do it.

Ventzy Kunev

Username: Ventzy
Joined: Thu Nov 05, 2009 2:41 am
Posts: 35

Re: How to snap with Y.Plugin.Resize

Posted: Sat Apr 21, 2012 3:32 pm

+0-

Ok, I think I got it. This snaps resizing on X to x=200 when cursor is "20px away from 200" - when cursor is between 180 and 220.

Code:

  var node = Y.one('#node');
  node.plug(Y.Plugin.Resize);
            
  node.resize.on('resize:align', function(e) {
    var dd = this.delegate.dd;
              
    if (dd.mouseXY[0] > 180 && dd.mouseXY[0] < 220) {
      dd.actXY[0] = 200;
    }
  });

Page 1 of 1

[ 2 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum