I knew after posting Drag.Group I needed to get a demo up quickly. The code is not completely refined yet so use at your own risk. I will be making updates over the next couple of days and will keep you posted.
A while back ago I posted an update to the Rubberband class. Its hard to understand the class unless you actually use it. One of the limitations that I found was the use of draggable elements. The coordinate locations were not updated and as a result the rubberband feature didn’t work.
I have made steps to add this functionality in place, currently the API is a bit broken and I am cleaning up how the coordinates are stored. In the meantime, I am providing a proof of concept.
Enjoy the demo!
Continue reading “Advanced UI component using Rubberband and Drag.Group”
Tags: Drag n Drop, Javascript, Mootools, rubberband, UI
A while back, Chris Esler wrote a terrific script for custom selection of elements within the DOM called Rubberband. I have found the use of Rubberband extremely handy when dealing with complex UI management. While Rubberband functioned exactly as described I found a few minor issues that I needed resolved before implementing.
The major annoyance I had with Rubberband was the actual selecting part. When selecting, the browser also selects and highlights the DOM in the background. I found this to be annoying and distracting, both hurt usability.
The second issue I found had to do with recycling the object. In my case, I was adding and removing elements to my selectable area. This required me to use the rebuild function. I found a slight bug that prevented this from working.
Both of these issues are no more!
Tags: Javascript, Mootools, rubberband