Jump to content
Search Community

Draggable Resize

Praney Behl 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

You're absolutely right.


OK so I've created a small codepen to try to explain it better.


So in the following codepen if you try to drag the rectangle you can see it will be bound to the limits of the grid.


The problem is when you move it, for instance, to 2/3 to the right of the grid, I would like the rectangle not to be able to expand to outside of the grid.


The rectangle is bound to the "container" grid. But I would like to define the bounds with a {minX, maxX} so I can define minimum size. By doing this I've not been able to restrict the growth of the rectangle to always be inside the grid, independently of its position


Makes sense?


See the Pen GNXOyz by hugonoro (@hugonoro) on CodePen

  • Thanks 1
Link to comment
Share on other sites



Did you try feeding the $container as the bounds for your handler element? It seems to achieve your desired behaviour (although if you push it against the corner it does go one pixel over but, surely you can mask that out, right?);


Alter this:

Draggable.create(handle, {
    bounds: { minX: 0, minY: 0, maxX: $container.width(), maxY: $container.height },

To this:

  Draggable.create(handle, {
    type: "x,y",
    bounds: $container,
  • Like 1
Link to comment
Share on other sites

I did, the problem with that is that I don't want the handle to move to the left of the element otherwise it will make the element disappear. That's why I'm struggling with this, from the beginning. I need to be able to define a minX So I can never allow it to be smaller than a specified size. The whole Idea is never let the rectangle be smaller than a specific size. Otherwise, yes, your suggestion would solve it :)

Link to comment
Share on other sites

  • 9 months later...

Thanks  swampthang and OSUblake.


I combined two pen's:



See the Pen VvRoWy by chriscoyier (@chriscoyier) on CodePen


See the Pen xeatn by jonathan (@jonathan) on CodePen



into a new pen '

See the Pen LzNyOW by KrikKrak (@KrikKrak) on CodePen



However, the svg handle does not work. Therefore, I attached the file here.

You can resize using the bottom right corner, although the icon is not visible.

As you can see both the dragging and resizing behavior is erratic. What did I do wrong?


Resize and drag video.rar

Link to comment
Share on other sites

now that I looked more carefully, the pen of swampthang is fantastic!: I just need to change the dimensions and some parameters. Although that is not very simple. The code is rather complicated. Is everything needed or did it came from a project that needed more coding?

Anyway, thanks a lot!!


best regards,


Link to comment
Share on other sites


The code is rather complicated. Is everything needed or did it came from a project that needed more coding?


I created that as a model of my current app to play with for my project so, yea, it's got more in it than is necessary. Didn't build it for this post, just happened to already have it and didn't mark it as private. I forked and simplified it a bit for you here...

See the Pen WZxJzj by swampthang (@swampthang) on CodePen

Added a few comments so you can see more what's going on. The reason I used a couple of wrappers for the video was because I wanted to both scoot the container down to make room for testing drag and resize as well as scale the size of the stage in order to more easily move things around in a smaller window - the video is 1920x1080. See...

transform: matrix(0.5, 0, 0, 0.5, 0, 0)

set on #stage-container and...

transform: translate3d(-48px, 50px, 0px);

set on #stage-wrapper


Also, I wanted to hide the overflow of the video. The drop-shadow for the stage is only there to help see the stage area. The font is the same one I use in the app and it's only used on the label for the checkbox.


I've added a few comments as well. Hope that helps.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites


Thanks Carvel Avis  / Swampthang,

I found the jewels. Only needed this. Works beautifully! Hard to find, extremely useful piece of excellent coding! 

best regards,



<!DOCTYPE html>
<html >
<meta charset="UTF-8">
<title>Video Resizer</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
<video id='vid1' loop='' controls autoplay>
<source src="http://qa.jwplayer.com/~todd/sintel.mp4" width="640" height="272" type="video/mp4">
<p>Your browser doesn't support the HTML5 video tag it seems.</p>
<div id='video-resizer' style='border: 1px dashed gray; width: 640px; height: 272px;'>
<div class='ui-resizable-handle ui-resizable-ne' data-clickable='true' id='ne'></div>
<div class='ui-resizable-handle ui-resizable-se' data-clickable='true' id='se'></div>
<div class='ui-resizable-handle ui-resizable-sw' data-clickable='true' id='sw'></div>
<div class='ui-resizable-handle ui-resizable-nw' data-clickable='true' id='nw'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/Draggable.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src="js/index.js"></script>

  • Like 1
Link to comment
Share on other sites

On 9/19/2017 at 2:00 PM, swampthang said:

Sorry. Just something I had already done and am out of my office using my phone. Just offering it as a sample with some possible solutions even if tidbits are helpful. 


Hehe. You don't have to apologize. I was just wondering why as I've never used it. 


I know this is kind of old, but I was just reading your earlier questions about doing rotation. Here's a demo I made for another question.


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



  • Like 3
Link to comment
Share on other sites

  • 3 years later...
On 9/24/2017 at 5:37 AM, OSUblake said:


This example is outstanding. Even though this is a few years old: I'd like to ask what I have to change to get the handle working in the right bottom corner. I've tried some things with little success. I don't need the rotation, so I assume it should be much simpler. Thank you.

Link to comment
Share on other sites

You'll need to continue to compensate for that changed value in the other parts of the script. Unfortunately we don't have the capacity to help with logical issues like this. If you have a question specific to GSAP please let us know and we'll do our best to help! Alternatively you could look to hire someone to customize this script to your needs.

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