Jump to content
Search Community

Draggable & Resizable

multivac test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • 4 months later...

Sahil, I am adapting your codepen for my own little project.  I'm still learning and pretty inexperienced so I need to get some understanding.

 

in your codepen I see variables you are calling proxies with a $ in front of the variable name ($right, etc.)

 

Then in the variable you create and an element that is already in the DOM.

 

What is going on here??  What does that do?

Link to comment
Share on other sites

Hi FatMunkey,

 

With Draggable you can set a trigger element, which will basically let you drag the element but when you do that, your draggable target doesn't act as trigger itself anymore.

 

See the Pen ZowrGJ?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

In my demo, lets take a look at right handle. I am setting the right handle's trigger element as element iteself, top-right corner and bottom-right corner. Reason to do that is, so I won't have to repeat the same logic for corners. I can trigger same logic for corners using the border handlers. So when you drag top-right corner, it triggers both top border and right border.

 

Why I am using triggers and what are they?

 

Those are DOM objects that I am creating but not appending to any elements. The dollar sign was just something that people using jQuery use while creating variables that use jQuery object(initially I was using jQuery to create that demo but dropped it), so it has nothing to do with entire logic. I am creating those proxy elements to simplify the logic, if I use draggable on border elements directly, they will get thrown off out of their position and it will take a more complex solution to keep them in position. Does that help?

 

See the Pen bMzLEE?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

  • 6 months later...

Hi Sahil,

 

Your resizable/draggable div code is great! It's helped me quite a bit!

 

Hope this thread is not too old to ask a question. Wondering if you could provide an revision in which bounds are imposed on the div being resized. Since all the actual draggable elements are "proxies" the 'bounds:' parameter doesn't work. So other than creating bounds limit calculations from scratch in the update functions, wondering if you have some idea of how to leverage GreenSock code to do so?

 

Thanks!

Link to comment
Share on other sites

@Sahil Don't know if you know about Draggable's deltaX and deltaY properties. It will give you the amount of change, so some of your functions could be changed to.

 

function updateRight() {
  TweenMax.set($container, { width: "+=" + this.deltaX });
}

function updateBottom() {
  TweenMax.set($container, { height: "+=" + this.deltaY });
}

function updateTop() {
  TweenMax.set($container, { height: "-=" + this.deltaY, y: "+=" + this.deltaY });
}

function updateLeft() {
  TweenMax.set($container, { width: "-=" + this.deltaX, x: "+=" + this.deltaX });
}

 

 

7 hours ago, briguy74 said:

Wondering if you could provide an revision in which bounds are imposed on the div being resized. Since all the actual draggable elements are "proxies" the 'bounds:' parameter doesn't work. So other than creating bounds limit calculations from scratch in the update functions, wondering if you have some idea of how to leverage GreenSock code to do so?

 

 

Here's an example from the thread I linked to above. I'm using bounds like normal. You can probably do the same with Sahil's version by using elements in the DOM instead of proxies.

 

See the Pen WYKKEN by osublake (@osublake) on CodePen

 

 

To use elements in the DOM for resize handles, you'll need to stop propagation of the onPress event.

 

Draggable.create(handle, {
  bounds: container,
  onPress: function(event) {
    event.stopPropagation();
  }
});  

 

 

You can also liveSnap/snap to points now. See the demos at the bottom.

https://greensock.com/1-20-0

 

 

  • Like 5
Link to comment
Share on other sites

@OSUblake Thanks for the revision! 

 

The deltaX and deltaY properties definitely simplified things a bit. I like your code, as it does use the actual handles in the div and can easily apply bounds. Wish I would have come across your version first. I ended up sticking with Sahil's code however, as I had already built out a complex application with it. 

 

So did not use the Draggable bounds and just put in some math in the update function to calculate when the sides hit the edges of my container. Thanks!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...