Dragging and dropping portlets

This is a repeat post - same topic as in July 2013, when I've solved exactly the same problem on Liferay 6.1. Now it's time to update the solution to Liferay 6.2. But I am ahead of myself: What seems to be the problem?

Liferay offers various layout templates that determine how the portlets are arranged on the page. When you build a Liferay page, you can drag&drop portlets on the page, according to the layout template. But it's not always obvious, where you can drop portlets. And if you happen to not know the layout template that has been chosen for the current page, you might not even know that there's another column or row. Especially when you have one of the multiple row layout templates.

Try it: Choose one of the layouts from that screenshot on the right, then drag&drop portlets: The only indicator you have is the blue line. Nothing indicates the additional row that still might be available unless you happen to hover over it.

Wouldn't it be nice to have all of the columns well visible - at least while you're dragging & dropping portlets? Like this "Hello World" portlet that's currently being dragged (note that the dotted style doesn't really show in this scaled image. Yes, I should have chosen a different border style. View that full image to see the unscaled version, or use your CSS imagination):

In 6.1, all the required CSS was available in the default theme, thus you only needed some javascript to add to the page. In 6.2 I couldn't find the CSS any more, thus I've had to add some custom rules. Do this in your theme, or just adhoc on the page (Site Administration/Pages/Look&Feel). You will need CSS like this:

And in addition, the same javascript that I mentioned in that old article still works (and is required as well). To try it out immediately, just go to "Site Administration/Pages/Javascript", then paste this code:

That's it, you're set: To persist the settings and have them available always, add these few lines to your themes and from then on even your inexperienced page maintainers will always easily identify the drop zones for portlets.

If you wonder what I'm doing when I'm travelling by train - this is an example. And as I am able to "make things look different" rather than "make things look nice", you might want to post some nicer CSS fragments as comment to this article.

Oh, and fyi: I've filed this as LPS-53664 so that there's a chance for it to be fixed soon - or at least for 7.0. I'll just have to find some time to do it yet again, on master. And, thanks to Daniel, there's also a CSS-only version that I've missed when I ported the 6.1 solution:

Blogs
Great article and a great idea! We used to do this in 5.x but we somehow quit doing it. I have to resume it at SMC!

Anyway, a small improvement: you should use outline and not border. The main difference is that outlines do not have box-model implications and therefore you have no layout flickering.
Thanks. Updated the gists.
A small note, it’s not supported by IE6 and IE7, so you should do something along the lines of:

1
outline: 1px dotted gray;
2
outline-color: rgba(0,0,0,0.3);
3
*border: 1px dotted gray; /* IE6, IE7 */
Thanks for this nice feature!
We found a little ugly side effect. If you use the liferay-drag-drop-indicator Javascript, it will destroy the site selection (in the dockbar). But only if the user has no permission to drag & drop the portlets. The drop down menu für the site selection is still there and okay, but you aren't able to click any sitelink. But the link is okay if you open it over the context menu.
The solution is to only use the css code. Both css versions (liferay-6.2-drag-drop-indicator-css and liferay-6.2-drag-drop-indicator-cssonly) worked without the liferay-drag-drop-indicator Javascript.
(Liferay 6.2.2 GA3 and 6.2.3 GA4)
[...] As the exploration begins, I'm sure everybody first looks for their pet peeves. There's something that's been nagging me in 6.1 and 6.2 - and unfortunately I couldn't get my fixed theme regression... [...] Read More