Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
multivac

Draggable & Resizable

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

Hello GSAP team.

 

Just my 2 cents about GSAP plugins.

 

Draggable is a great piece of software. Dragging is often use with resizing, it would be great to have a "Resizable" plugin. I would pay for that.

 

I just don't feel like adding jQuery to my project:

 

See the Pen qLAwj by jamiejefferson (@jamiejefferson) on CodePen

 

Link to comment
Share on other sites

Great idea, I didn't thought about using Draggable to jump start a resize. Note that resizing from the bottom right corner is the easy part. It gets much more complex when trying to resize from all corners.

Link to comment
Share on other sites

Ohk previous demo was overly complex solution. Here is one final attempt.

 

You should be able to write a plugin that will take different parameters like min-max height-width etc. To disable certain corners and edges, just hide them, simple. You can take parameters for that as well.

 

See the Pen qppmrL?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Great demo, Sahil. Worked really well on FireFox. The resize handles seem to ignore mouse events on Chrome (Mac).

Not seeing any errors in the console. When I try to resize, the main Draggable moves

 

 

Link to comment
Share on other sites

Thanks Carl, I had to use data-clickable attribute on those divs, it should be fixed now.(same behavior on windows)

  • Like 2
Link to comment
Share on other sites

Sweet! works great.

  • Like 1
Link to comment
Share on other sites

Due to bug I encountered with startDrag method in chrome's touch events, I have updated demo to use multiple triggers.

 

UPDATE: Not a bug, check this thread.

 

 

See the Pen Gyydyw?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to comment
Share on other sites

  • 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.

×