Last time, we saw how quickly we can get a minimal working setup in place with draggable elements and jQuery UI. Here, we’ll talk about how to style our draggable elements.
In particular, we want to let users know that the draggable Things are actually draggable, using only visual cues. Here is what our styled draggable elements will look like once we’re done.
As you can see, we still haven’t addressed all the concerns we brought up last time. For example, you might notice that there’s still no real goal; and no matter how hard you try, you can’t get Thing 1 to stack on top of Thing 2.
For now, the point is that a little bit of styling can send a strong yet subtle signal to the user about draggability. In fact, the same can be said of almost any element that you want users to interact with on your site.
Breaking down the code
The CSS styles for our draggable objects
Overall, the CSS in use here is very basic, since we ended up relegating the task of generating the dot textures to an SVG image. If you follow the comment blocks within the CSS code, they should give you some context to each style rule.
When trying to do the 1px dots with pure CSS, I had the distinct feeling that browsers didn’t like it, since the dots would often get distorted and misshaped. Enter SVG’s onto the scene, which allow us to display all the tiny little dots we want without having to rely on the browsers’ awkward handling of tiny pixel values.
The SVG image for the dot textures
Essentially, here’s the SVG that we end up with for each texture.
I don’t know about you, but I think it’s very cool that plain and simple code can generate graphics which solve a very unique set of problems such as the ability to render things more clearly at very small and very large scales.
If you inspect the draggable elements on this page, you may find that some line-heights, font-sizes, etc. are slightly different from the code shown. The code was generated using a plain HTML page, so you may have to tweak a few things to get the spacing to cooperate with your site’s font styles.
Thinking down the road to where this might all be useful, it’s pretty clear that if we want users to drag things on our site, then we probably also want them to drop those things in a specific area for a specific reason. This is the territory we’ll venture into next time.