AustinNotAustin

Thanks, Does this set the x and y draggable property value, or something else? After playing with it, it's working great. Thanks again!

Hello again, When dragging a div, I was expecting the x and y coord of the draggable obj to be the center of the div. It doesn't seem to be the case. Is there a centerX property? I didn't see one in the docs. If not, I can calculate it. See the code pen example to understand why the center point is valuable to me. Red background color is representative of the closest element to my currently held draggable element. (Using the center point to determine which element is closer. Thanks!

Okay, thanks for the tip. I like it If I can get the codepen working I'll update this thread. Thanks you two.

Thanks you two, My problem exists when I click a button to make an object, the objects position is bound to another separate div. There is then a gap between where the newly created panel is from the div in which I clicked/held down to create said obj. Here's a screen shot. On a separate note: I attempted to recreate the problem as simplistic as possible on codepen (see above updated original post), but it seems I'm doing something incorrectly. When making a new draggable object, would this be an appropriate implementation? Make a class, Make a variable of the class be the draggable, Reference the parent class' draggable variable when need. Like this --> class SomeObject { constructor( ... make the class this.draggable = Draggable.create('# ... make the draggable variable Then reference the draggable via the parent class obj let obj = new SomeObject(); obj.draggable['0'].startDrag(event); Is this the proper use of a draggable?

Okay, thanks. Which value does startDrag use from the event? e.g. screenX, clientX, x, offsetX, pageX, ect.. Or does it use more than one of those values?

Hey everyone, I read through the doc on both version 2 and 3 for the .startDrag() method. I am still a bit confused on its implementation. What parameters should I be passing it? I passed some x and y coords that I thought would make the startDrag be called from my objects center, but instead it drags from the top left corner. I've tried many different coord values. I'm currently calling the .startDrag() method on the object in question. Is this the correct usage?

This little piece of code is working for me, but if there is a property that already exists called something like draggableInstance.vars.points.isSnapped, that'd be even better. Draggable.create... liveSnap: { points: function(point) { // Some logic to determine the closest snap point let closestSnapPoint = {x: someNumber, y: someNumber}; if (closestSnapPoint.x == this.x && closestSnapPoint.y == this.y) self.isSnappedTogether = true; else self.isSnappedTogether = false; } Thanks for responding so quickly. Edit: Okay, no property like that, thanks!

@GreenSock, I'm using liveSnap to move a draggable. When the draggable gets snapped (due to being within the radius I set), I want to set a variable to true. That variable would indicate that the draggable has been live snapped. Since I'm using liveSnap, would I need to look for another property instead of "draggableInstance.vars.snap". I ask because I don't see such a property when printing the object to console. If there isn't a property already made I'll just manage my own, as you suggested.

Is there a bool value somewhere to determine if a draggable is snapped? I want to use that data elsewhere.

Thanks for your help. My project doesn't nearly as qualify for the level of professional consulting you'd provide. I'll just use brute force techniques as usual 😅

Okay, Do GreenSock Club members get limited consulting, or are you referring to something else?

@GreenSock, Okay thanks. I'll get rid if those Math.abs statements. Would you still recommend getting the angle and not using the 8 points if you plan on implementing a turning ability? I will be turning these rectangles and snapping to them while turned. That would also turn the draggable. Still think an angle would be the best approach? Your last recommendation worked great so I'm all ears haha.

I got it working. Thanks for the help you two. I used the approach suggestion from @GreenSock, and I plan on making some optimizations from the post you linked to me @OSUblake. Here's the codepen solution: https://codepen.io/AustinNotAustin/pen/abwdqwQ It's probably an awful implementation, but I plan to continue working on it.

Thanks, I'll have to digest that post a little more. I'll see what I can come up with using the approach both of you suggested.

@GreenSock Thanks, I am aware that I can make a custom function. Do you believe your approach would be better than mine? Your approach being: Search for the closest object, then perform logic to find snappable points. My approach being: Store all snappable points available in an array, and remove respective snappable points when an object is moved. If you have a minute or two, could you elaborate on why one or the other is the better option?

I noticed that the snapping points are only applying to the individual object and not all the objects. This is a new problem since I had it working before. I'll see about fixing that and maybe solve this. Either way, I'd like to hear everyone else's thoughts on the best way to implement this.

Hey everyone, I'm attempting to create dynamic snapping to other snappable objects. I thought I could simply assign the liveSnap points to a global variable, and then change that variable. It worked, kinda. I can now dynamically add additional snap points to an array and the remaining snappable objects will have access to these new points. The problems exists when attempting to remove a snap point from the global variable. I honestly don't think this problem pertains to GreenSock, and is a vanilla javascript issue that I'm having on my own. However, I'm curious to see if there is a way I can snap two snappable objects together, easier than my way. If not, here's the part giving me a problem. (I think) // Remove this obj's snap points from the global snap point list this.removeSnapPoints = () => { let pointLocations = [ this.snapPoints.tl, this.snapPoints.tm, this.snapPoints.tr, this.snapPoints.ml, this.snapPoints.mr, this.snapPoints.bl, this.snapPoints.bm, this.snapPoints.br, ]; // for (let val of ) // console.log(this.snapPoints.tl); console.log(`Before: ${snappablePoints}`); pointLocations.forEach(pointLoc => { console.log(`Index of tl: ${snappablePoints.indexOf(pointLoc)}`); console.log(`Value of tl: ${JSON.stringify(pointLocations)}`); snappablePoints.forEach(snap => { if (JSON.stringify(pointLoc) == JSON.stringify(snap)) { console.log(`pointLoc: ${JSON.stringify(pointLoc)} | snap: ${JSON.stringify(snap)}`); } }); // This function is deleting all of the items in the array instead of just the ones I identified (i.e. the points that belong to the panel being moved) }); };