How To Style Draggable Elements To Indicate Draggability

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

As far as the underlying HTML, we have not done a lot since last time, other than insert a stylesheet and move our JavaScript to a separate file.

We could have stuck with a single line of JavaScript here (like last time) and not used a separate file, if it were not for the “dot” texture indicators that appear to the right of each draggable Thing.  While one might think the texture could be done relatively quickly with CSS, it turns out (in the author’s case anyway) that this is not so easy.

As it happens, Scalable Vector Graphics (SVG’s) are a great solution here.  We’ll address the implementation (which optionally may include some JavaScript) later after the rest of our CSS.

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

While JavaScript is in no way required for using SVG images, I found that in this case it helped me to eliminate some repetitiveness in my code and also to generalize the process I was using to make the graphics.  The JavaScript is fun and interesting but not required, so see the JavaScript file further below for more info.

Essentially, here’s the SVG that we end up with for each texture.

You could either insert the above HTML block at the end of each div.thing, or you could use the JavaScript code below, which generates the SVG’s and appends them to the right elements.

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.

Finally, that leaves us with the JavaScript

If you are following along from the last post in the series, you may recall that we only needed a single line of our own JavaScript to make our Things draggable (thanks to jQuery and jQuery UI).

It turns out that we have added no extra JavaScript since last time, except for the function that generates the SVG, and one line of code to insert the SVG into each draggable Thing.

And there you have it!  We’re now able to let users drag elements around on the screen with very little JavaScript, and we’re also sending very strong visual cues to users which tells them they are able to actually drag the things we want them to.

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.