Jump to content
GreenSock

Praney Behl

Draggable Resize

By Praney Behl, in GSAP. Views: 9,535

Moderator Tag

Recommended Posts

Posted

Hi, hugonoro. Do you have a codepen example that shows the issue you're having?

Link to comment
Share on other sites
Posted

Hi swampthang, 

not really because I'm trying this on a project and it's integrated with several other functionalities.

Link to comment
Share on other sites
Posted

Hello hugonoro,

 

I'm having problems visualising what is it that you are tying to achieve? It would be really beneficial if we could see a reduced-case example with just this functionality that you are having issues with.

Link to comment
Share on other sites
Posted

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
Posted

Ah! Yes, I see now.

 

I'm not the greatest with this kind of logic but will mull over it a bit to see if I can uncover something.

 

Wort case scenario, Blake himself will show up at some point and he'll probably be able to point to a solution.

  • Like 2
Link to comment
Share on other sites
Posted

hugonoro,

 

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, {
    type:"x,y",
    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
Posted

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
Posted

Those examples are almost 2 years old, and I would do some stuff differently. Particularly with the resize handle and how it's positioned.

 

Using what you have, you can set up some constraints like this.

 

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

 

  • Like 3
Link to comment
Share on other sites
Posted

Hi Blake,

that's perfect.

 

I've reached a solution where I was creating some constraints for the elements size but this solution is exactly what I was looking for.

Thank you very much for your help.

  • Like 2
Link to comment
Share on other sites
  • 9 months later...
Posted

Probably, but I don't see a video in your demo.

 

Go search how to make a video responsive. It's usually done by setting the padding of the element as a percentage. The percentage to use is going to be determined by the aspect ratio or the video. 

  • Like 1
Link to comment
Share on other sites
Posted

I'm wondering why you would even need jquery-ui though? Isn't that the point of this thread? It's not needed.

Link to comment
Share on other sites
Posted

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. 

  • Like 1
Link to comment
Share on other sites
Posted

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
Posted

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,

Harry

Link to comment
Share on other sites
Posted
Quote

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
Posted

 

Thanks Carvel Avis  / Swampthang,

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

best regards,

Harry

 

<!DOCTYPE html>
<html >
<head>
<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">
</head>
<body>
<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>
</video>
<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>
</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>
</body>
</html>
 

  • Like 1
Link to comment
Share on other sites
Posted
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 gGLLOa by osublake (@osublake) on CodePen

 

 

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account