hellboy

Oh yeah, I have noticed that too. For m it still works locally, because I copied the beta JS file back then. Also for this script: http://codepen.io/osublake/pen/6d3b6653862f81c2cf7e9891bedc35e7?editors=0010, it doesn't work anymore like it used to. I'm sure that it initially didn't let the box out of the container. Even just yesterday, the box was kinda jumping between the container and the outside position on the mouse when I tested it -- today you can drag it outside without any problem. So technically, it should work with that snap feature? Because for me now, the main problem is, that the element doesn't correctly stick to the wall, once it rotates. When now thinking about it... I guess I probably need to apply the offset after the rotation? For now it looks like this: - https://ibb.co/mo5wRF (before the corner) - https://ibb.co/frk7Yv (when it initially sticks to the "next" wall) - https://ibb.co/i4V7Yv (when I move it a little further, it sticks back to the first wall -- that's the "jumping" I was talking about; it does the 2. and 3. step quite a lot of times, until it's not fully sticked to the next wall -- after it does stick to the next wall, everything it fine) Also, it this formula correct -- I'm currently using it, to recalculate the offset when dropping the item into the container... it kinda works, but I'm not 100% sure if that is the right way. if ( self.target._gsTransform.rotation === 90 || self.target._gsTransform.rotation === 270 ) { var elHeight = self.target.clientHeight; var elWidth = self.target.clientWidth; var rotationValue = elWidth > elHeight ? (elWidth - elHeight) / 2 : (elHeight - elWidth) / 2; elementRotationOffsetX = rotationValue; elementRotationOffsetY = -rotationValue; }

Oh, one thing I forgot to mention is, that I don't use only square elements, but also rectangular. That's what makes it more tricky.

Hey Guys, me again. Thank you very much for the help last time! Now, I have again one more question and it is regarding the rotation of the element, meaning, when I'm at the bottom border it is without rotation, at the top border 180, left 90 & right 270. I did make a helper function, which is triggered inside the onDrag callback, but it's not really reliable & quite jittery when it comes to borders. function calculateRotation( self ) { $el = $( self.target ); if ( self.y >= self.maxY ) { self.rotation = 0; } else if ( self.y <= self.minY ) { self.rotation = 180; } else if ( self.x >= self.maxX ) { self.rotation = 270; } else if ( self.x <= self.minX ) { self.rotation = 90; } TweenLite.set( $el, { rotation: self.rotation } ); Draggable.get( $el ).update( true ); } Now, my question is, how do I do this correctly? Thanks! Edit: I currently use a variation of Blake's script (http://codepen.io/osublake/pen/6d3b6653862f81c2cf7e9891bedc35e7?editors=0010) as the base (except I can't drag the element out of the container once it's in, but I'm sure that initially, it was also like that in this example).

Hey! Wow Blake, thank you very much, that's definitely a great help! For now my specs are only for rectangular rooms, so it should be fine. Thanks again! Was working on this for hours, but couldn't really figure out how to do it.

Thank you! Yes, I've found a similar example that I would need: https://greensock.com/draggable-toss-demo (with "Snap end position to grid" enabled, without vertical / horizontal delimiters & the toss effect also isn't required) The box would always need float to the nearest border -- kinda "magnetic border" effect

Hey, Thanks! The room will (for now) probably have fixed height / width, so it won't scale. I was thinking of probably snapping on dragEnd yes. So something similar like the liveSnap function, but the grid would need to be only along the borders (so it would always stick to the nearest border when released). Not really sure how to do that.

Sorry, forgot to add a CodePen example: http://codepen.io/hellboy124/pen/EZGNzN So for now, the element does need to be dropped first, before the detection starts working. If you now comment in the "finalX = 0" or "finalY = 0", it will work, but not really as you would expect. It only works, if you exactly follow along with the border with your pointer, else it just jumps and sticks to the wall (to the left one, if finalX = 0; otherwise to the top one).

Hello! I'm currently building a room planner, but I got stuck with a problem. I want (some) elements to always stick to the wall. So my current onDrag function is: function () { var $el = $(this.target); // You get the height, width, startX, endX (start + width), startY & endY (start + height) of that element var elData = getElementData($el, this); // Once the element is insde the planner, don't let it out anymore! if (this.hitTest($roomPlanner, '100%')) { this.applyBounds($roomPlanner); $el.addClass('is-in-container'); } var isStickingToWand = ( elData.startX <= 0 || elData.startY <= 0 || elData.endX >= roomPlannerWidth || elData.endY >= roomPlannerHeight ); var finalX = elData.startX; var finalY = elData.startY; if (!isStickingToWand) { //finalX = 0; //finalY = 0; } // just a helper for TweenLite.set & Draggable.update moveElementTo($el, finalX, finalY); } So, I've figured out how to detect if that element is sticking to the wall, but can't figure out how to calculate the correct final x & y. It technically works of I uncomment either of them, but not as I want, because the element doesn't stick to the border on nearest point to pointer coordinates.