Search the Community
Showing results for tags 'bounds'.
-
Hello i want to bound the object to be dragged only the border of the circle . i have provided the codepen in which small circle is bound to be dragged only inside circle but i want to bound it to be dragged only on the border this codepen is not but please modify this code alittle so that it meets my requirments thanks alot : )
-
Hey I have currently a Problem with the bounds. I have a element with dynamic elements around. So if I move my element the other elements are shown. If I stop moving the elemens will be removed. The problem is that the right and the bottom borders not correctly working. The 3 elements arround are the dynamic elements. If I stop moving the elements are removed But the bottom and the right corner did not work. My draggable object looks like this Draggable.create(`#${id}`, { type: 'x,y', bounds: { target: '#boundArea', top: 0, left: 0, }, ...otherFunctionsAreHere(liveSnap, onPress, onDrag and onDragEnd) }); bottom: 0 or right: 0 are no available options If I set a height and a width of the white rect to my bounds. The bounds looks like this The text can be changed.
-
Hi there! I am trying to create a slider that shows a number, depending on its position (like an input range with a number directly on the thumb) using the Draggable plugin. I have defined a bounds object to keep the slider within these bounds. However, since the thumb's size increases during dragging, the thumb does not stay within the bounds all the time. Draggable allows the thumb to move into a position that would have kept it in its original bounds (not its updated bounds). The issue becomes apparent if you try to drag the slider from 1 to 100 in one go. Notice also, when you arrive at 100 and then let go, the slider snaps into the correct position. How can I change my setup to make sure that the slider stays within the bounds at all times? Thanks!
-
hi guys, i need your help, it's been a couple days that i'm trying to solve this. i have a box wich contains SVGs that are draggable, that box needs its box-sizing to be "content-box", and the draggable SVGs bounds needs to be inside the box (not touching the borders) that's why i created a bounds-box which take 100% width and height of the parent box, and set the draggable bounds to that bounds-box, it works fine , the only problem is when i zoom in or out, the bounds change after dragging the svg around and u can see that the bounds got -1px on every side. thank you.
-
Here is a question that I was pondering. I was studying the applyBounds() for draggable objects. This allows me to restrict objects to a particular area. Is there a way to restrict objects from an area? In this sample pen - I can keep the three balls in the larger box just fine but what if I want to keep them from overlapping at any time - no matter where they are positioned in the box? I'm not even asking that they push each other around but I would just need to drag around them rather than over them. Did I miss a simple thing somewhere? (Just imagine three baseballs in a shoebox) They cannot occupy the same space at the same time.
- 19 replies
-
- applybounds()
- bounds
-
(and 1 more)
Tagged with:
-
See the Pen Draggable "Toss" Demo (4col) by GreenSock (@GreenSock) on CodePen. See many of Draggables properties in action including bounds, liveSnap, snap, edgeResistance and more. This demo is a great starting point to get familiar with Draggable and ThrowProps plugin. Fork, edit and enjoy! Be sure to read the [docs id="js.Draggable" linktext="Draggable Documentation"].
-
- bounds
- edgeresistance
-
(and 5 more)
Tagged with:
-
Hi Just discovered GSAP and what a great library it is! I am having a problem with bounding my draggable components in my React testing. I have followed the great instructions found here (https://greensock.com/react) to get a reference to the React generated DOM element and haven't had any problems making them draggable. The draggables sit inside of another React component which should act as the bounding element. I am again getting a reference to this element as previously described and passing this into the draggable components as props - to be referenced by the draggable childrens draggable.create. This works (in that it doesn't throw any errors and my console logs are showing the correct DOM element being passed in) but the draggable bounds are behaving very oddly. A demo paints a million words so you can see what I mean here (I'm a bit more comfortable in codesandbox.io): The draggable elements appear to be bounded by something (not a DOM element I recognise) that is exactly 4 times their size and not their parent component? I have seen demo's, such as this one where they are successfully bounding a child react component in its parent. The only obvious difference to me appears to be the use of a class component over a functional component but, again, I'm not sure why that would make a difference? Note: I'm not adverse to using a class component but would love to understand why this is behaving the way it is. Any tips or suggestions welcome!
-
One nice thing about using an element instead of min/max values for a Draggable's bounds is that the bounds automatically adjust if the bounding element resizes. But sometimes you don't want the bounds to extend all the way to an element's edges, so you have to pass in min/max values. The problem with this is that your bounds won't change on a resize, so you have to manually calculate and apply a new bounds object. What if we could combine the two approaches? There are many times where I want the bounds to be offset just a little bit from it's container, and have to decide between passing in min/max values or creating a new element specifically for the bounds. It would be nice if I could skip this, and just pass in an element with optional min/max values. Consider the following... Draggable.create(".box", { bounds: { target: "#container", minX: 10, maxX: "+=50", maxY: "-=25" } }); If the .box element is 100 x 100 and the #container element is 500 x 500, then the bounds would be calculated as: minX: 10, minY: 0, maxX: 450, maxY: 375 Here's a demo of what this would like in action. The container is in black, and the offset is in red. If you resize the window, it still maintains the offset bounds.
-
Hello, I am very new to your api/code but definitely love it! Conceptually what is the best create a draggable div that snaps to a grid and can detect when it shares a cell with another div. Should I write validation a function in onThrowComplete (using the ThrowPropsPlugin)? Just looking for a little guidance.
-
Hello, I am creating a barometer that has an interactive needle for the user to adjust. I used the draggable type rotation to set it to spin, however when I tried putting in the bounds, (bounds:{minRotation:0, maxRotation:90}), it is not recognizing the bounds at all. Also, when I have tried to get the info on where the needle's last rotation degree lands (onDragEnd:function() { console.log(this.rotation);}), the console logs it as undefined. Any clues why this is not being applied? Thanks, ErinD function init() { console.log("yeash!!!!"); needleImg= document.getElementById("bNeedle"); barometerImg=document.getElementById("barometer"); smallForm=document.getElementById("groupThis"); //console.log(needleImg); TweenMax.to(needleImg, 3, {css:{rotation:145, transformOrigin:"193px 47px"},ease:Elastic.easeOut}); Draggable.create(needleImg, { type:"rotation", throwProps:true, onDragEnd:function() { console.log(this.rotation);}, bounds:{minRotation:0, maxRotation:90} }); }
-
Hello, Is there a way to invert the behavior of the bounds management. Having a box with bigger size than the container, that could be draggable but must fill the container. Best, Nico J.
-
So I haven't had any luck finding an answer to this via Google or the forums here yet, so hopefully someone can help. Is there a way to specify what (other than the selected item) the selection rectangle uses to set its size, if a TransformManager is applied to a Sprite with multiple children? Scenario: I have a Sprite with 2 children: a Bitmap, and a Shape. The Shape has a blendmode of ERASE, so the user can "erase" the image below it, but if the user 'paints' outside the visible area of the image, it increases the selection box size. I only want the selection box to be sized to the image, not the size of the image + erase layer. Does that make sense? Thanks in advance! -Jarrod
-
I recently updated my Transformer files, and noticed a different behavior I don't see mentioned in the change log. I have a parent object, with the size of 100% width and height, going to the size of the user's browser. So it's around 1000x800 roughly. There are other objects (images) added within this parent, that the FlexTransformManager are added onto. We set the bounds to be (-2000,-2000,6000,6000). The reason for this is so the images can be scaled quite large, and parts of the image are allowed to be scaled and dragged 'off stage'. With the recent update (or one since 1.952), the Transformer will no allow the images to be scaled beyond the bounds of the parent object, even though the bounds are set to a larger number. Is this new intended functionality, or a way I can remove this new default feature? It seems the items are now ignoring the bounds I give them, and constraining to the size of the parent. Thanks,
-
Hi again, OK so I need some help once more. I've ran into an issue where trying to add bounds is causing odd behavior. If I set the bounds to the full size, the bound drag/scale behavior works as expected, but the movieclips I'm trying to transform get compacted into a smaller scale version of my product area when it's loaded (almost like it's trying to enforce the bounds without the scale that is applied to the parent MC of the added objects). However, if I apply the scale multiplier to the bounds, then the movieclips appear in their correct locations, but they can be dragged far off to the right and bottom. I guess my confusion and question on all of this is: is there a way to set the manager to reside in a particular movieclip so it picks up the scale of it? Or do i need to do something else? Here is part of my code that's related to this issue, with some lengthy parts commented out to explain what they're doing. This is AS3 in a Flex application (the dataProvider.layouts contains a bunch of layer nodes of parsed XML that contains text and image objects) public var manager:TransformManager = new TransformManager(); private var _layoutCanvas:Canvas; public function renderPanel():void { var xScale:Number = _panelSprite.width / _dataProvider.width; var yScale:Number = _panelSprite.height / _dataProvider.height; layoutCanvas.scaleX = xScale; //I also tried to apply these scales at the end of all the code, it didn't help layoutCanvas.scaleY = yScale; var layout:LayoutVO = _dataProvider.layouts.getItemAt(0) as LayoutVO; for( var i:int = 0; i < layout.layers.length; ++i ) { var layer:LayerVO = layout.layers.getItemAt(i) as LayerVO; var region:EditableRegion; //extends UIComponent switch( layer.type ) { case "text": var textVO:TextVO = layer.content as TextVO; var textRegion:TextRegion = new TextRegion(); //extends EditableRegion region = textRegion; break; case "image": var imageVO:ImageVO = layer.content as ImageVO; var imageRegion:ImageRegion = new ImageRegion(); //extends EditableRegion region = imageRegion; break; } if( region ) { var position:PositionVO = layer.frame.position; region.x = position.xOffset; region.y = position.yOffset; region.width = position.width; region.height = position.height; region.dataProvider = layer; layoutCanvas.addChild( region ); editableRegionsArray[i] = region; if(layer.movable) { var tmItem:TransformItem = manager.addItem(region); tmItem.addEventListener(TransformEvent.SELECT, checkContents); tmItem.addEventListener(TransformEvent.RELEASE_CURSOR, tmOnRelease); } } } //Transform Manager options setup var boundsRect:Rectangle = new Rectangle(_dataProvider.boundsPosition.xOffset, _dataProvider.boundsPosition.yOffset, _dataProvider.boundsPosition.width, (_dataProvider.boundsPosition.height)); manager.bounds = boundsRect; manager.constrainScale = true; manager.hideCenterHandle = true; manager.forceSelectionToFront = false; } So, basically, this rect: var boundsRect:Rectangle = new Rectangle(_dataProvider.boundsPosition.xOffset, _dataProvider.boundsPosition.yOffset, _dataProvider.boundsPosition.width, (_dataProvider.boundsPosition.height)); Makes the bounds BEHAVIOR as expected, but jacks up the placement of the editableRegions. and this Rect (or no bounds set at all) results in the editableRegions being placed correctly, BUT then the bounds at the right and bottom bounds are WAY off the expected edge. var boundsRect:Rectangle = new Rectangle(_dataProvider.boundsPosition.xOffset, _dataProvider.boundsPosition.yOffset, (_dataProvider.boundsPosition.width*xScale), (_dataProvider.boundsPosition.height*xScale)); So, do you have any idea have I can get the bounds behavior to be scaled correctly with the layoutCanvas, which is scaled and has the displayObjects added to it? I tried to add the bounds before the objects were added to the manager and that didn't change anything. I can give more info if needed.