Dragging portlets is easy - but where to drop them?

When you're arranging portlets on your pages, have you ever wondered, where you'll be able to drop them? Especially when you use a more complex layout, like the 1-2-1-columns and don't have a lot of content on the page, it's sometimes not obvious what your options are. The good news is that Liferay comes well prepared for your intent - for some reason it just doesn't make full use of it.

This is what it looks like to have the 1-2-1-column layout with only one portlet in the first column, dragging a second portlet around the page. I'm using the classic theme for this screenshot (click for full size):

If you just chose the 1-2-1-column layout, you probably have some expectation where you can drop your portlet. If you just happen to work on a page and don't feel like checking which layout-template is currently active, wouldn't you rather like to see an indicator of the available columns, like this?

Here's how to activate the indicators: Go to "Manage Page", top-level, and enter this as the Javascript for each page. Alternatively, add the snippet to your custom theme:

As you might have heard that Liferay 6.2 will be using twitter bootstrap (e.g. reported here), a lot on the UI side will change, so I decided to publish this workaround here instead of pushing LPS-33636