Today was a fun coffee and code day with @thereginawong! Actually it turned into a bubbletea and code day at Moii cafe. I love that place! I wanted to play around some more with .draggable() and made moveable post-its. Each post-it was created with two divs and a textarea for user input.
The style of the post-its was modelled on the Stickies for Mac OS.
The first post-it note I created worked well. Then I added 5 more notes and stacked them one on top of another. That is when the text stopped moving with the div. The post-it note elements were all broken up when you dragged the note! I figured out this was a problem with the z-index; the elements for each post-it note were not at the same z-index!
What happened was that you would be typing in a textarea and then try to move a div that did not contain the textarea! Giving each post-it note a z-index that correlated to their order in the html solved this problem.
I love bright colors. They make me happy!
Day 23 – Post-It Notes