Thank you resdesign. That was very helpful and exactly what I was trying to accomplish. Unfortunately I'm still pretty new to the development side of things, which was probably apparent by my code. I do have a couple of questions to make sure I completely understand everything in that example if you don't mind. At this point I haven't had the chance to really dig into this code as thoroughly as I would have liked.
1. The main question is about the variable "k" not sure how or where that variable came from or how it came into play outside of the conditional. Was that created for the sake of holding the results of the function? I'm not real clear on that one.
2. I'm going to tear into the code on this one, but I am assuming the .C is referring to a CSS class to style the objects?
3. I tweeked positioning on the final result because there was some offsetting that took place after the drop event and disabling of the draggable and droppable. I'm still getting some apparent random offsetting with the draggables. Is there a way to tweek this with control over each object? each one has a different level of offset which is why I ask. You can see it on my test server. It's still a work in progress and the fireworks are not part of the final product. lol http://www.f30graphics.com/TestArea/TimeIsMoney/TimeIsMoney.html
other than that, it seems pretty straight forward to me. I'll blame it on my noobishness for not thinking of doing it that way to start with instead of working backwards. lol Thank you again so much for the help on this.
- K is just a variable that is used to store the number of draggable that have been dropped in the right place - When you have all your draggable in place, then it will trigger the animation
- C is a class name that we give to each of the draggables with addClass(). This could be anything you want to give it. Since it is done with a loop, the names become C0, C1, C2, C3 - if you had given it the name thingt then the class names would be thing0, thing1, thing2...
- Now in the droppable you have the accept line that will accept the respective draggables - so the droppable are array element droppableEl will accept the object that has the class .C0, the element droppableEl will accept the element with the class .C3
- The position can be changed with what you need - it will place the draggable into the bounding box of your droppable at for example center center or left top, etc... there are several other options.
I hope this help you understand how things were done.
As for k, I think what I'm unclear about is how that array (k) is having the information pushed into it in this code. I think I'm unclear on that because I only see it in three places. Where it is being declared, where it is being iterated with the k++, and then in the final conditional statement. So, I gues my question is more accurately defined as How is it getting populated with the values to know when the all droppables have received draggables?
on point 3 that was a clarification that sharpened my understanding of it to a fine point. Thank you.
position, I messed with the my: and at: values with left center and left center but also added a +5.5% to get them close to an aesthetically lined up position, but each of my draggables are still offset with differring amounts. Is there a way to fix that, or is just something I have to get to acceptable degree of offset?
I sincerely appreciate you taking the time to answer my questions and helping this noob figure this stuff out. Stepping into the dev world for the first time I feel like I'm having to be a multiLinguist to do this stuff.
K is situated in the event handler - therefore when the event occurs, k is incremented and when it is equal to the number of events (the draggables that are correctly placed) it does what you want it to do, in this case an animation. This could be used for somthing else if you wanted.
The position can use left, top, middle, center, bottom... I would not add pixels to it. It is better to get the placement that way. If you have images that have strange boundaries, you could use transparent droppables over images. Hope this makes sense.
Thank you. it does. You've been a great help. I and all the children that are going to benefit from this truly appreciate it.
I would like to give credit to Zaxist who taught me this and more. He is the real genius!
Glad I could help you in return!