Summary
Testing to see if I can have many levels of inter-list sorting with the jQuery UI. I can!
/experiments /tag /drag
Calendar Strips Drag on a Grid
Summary
I isolated the dragging portion of update 3 of the reusable calendar project to show what options under the draggable jQuery UI to use.
In the draggable() function, I used the grid: [0, 15] to restrict its movement to 15 px vertical, then I used containment: [0, y1, 0, y2], where y1 is the offsetTop value of the strip itself when it’s at the last month/digit, and y2 is at the first month/digit, to restrict its range so the strip won’t go past the first and last value.
Reusable Calendar Project Update 3
Summary
Adding more functionalities to the date display to the reusable calendar. Now you can click on the months or year digits, or you can drag the strips to change the date. (Before, you can only click on the arrows move forward or backward one month at a time.)
This dragging function was made easily possible by the jQuery UI. It takes a lot of the grunt work out of the process.
Notes
The current range is Jan 1000 to Dec 9999. But technically, the calendar doesn’t apply before October 15, 1582, since that’s when the Gregorian calendar was first adopted. So I will add that restriction in the next or upcoming updates.
jQuery UI Drag/Drop Basics
Summary
Moving into the jQuery UI section and testing the dragging and dropping functions.
Notes
Notice in the demo that the box on the right is set to float:right, so if you supposedly dropped the green box into it, and change your window width, the green (turned light grey) box stays at the same place while the right box moves to the left. Got to fix that experience in future, more complex versions.