Exploring Liferay 7: Dragging and dropping portlets

Yay - Liferay 7 CE is out.

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 merged into master - partly because of my missing CSS design skills, partly because I started lobbying too late, when only critical fixes were accepted. And partly because there was an impending update to the DOM which would have rendered the fix invalid almost immediately after committing it.

Turns out that my 6.2 patch is not invalidated by whatever has been introduced in Liferay 7, and it's trivial for you to fix the issue - and easy to bring into your own themes (everybody has their own theme anyways - right?). Here's the problem again:

When you drag and drop portlets on the page, Liferay does not provide an indicator, where you can drop it. While that's easy and intuitive for your stereotype 2-columns layout, it gets more tricky with the more complex layouts that provide multiple rows. Like in this example (showing the fixed version where you can see the dropzones once you start dragging):

As you can see, the visual appearance could use some improvement, but the technical requirement has been met. That's the caveat of having me work on theme issues: I'm able to make things look different - if you want them to look nice, you better ask someone else ;). Well, the arena is open and your suggestions for improvement are accepted and welcome.

The good news: The CSS that worked for 6.2 still works for 7.0 - no need to re-learn anything about the DOM for Liferay 7 - just add this CSS to the page (e.g. through the "Public Pages / Configuration / Look and Feel / CSS", alternatively private or individual pages) or to your own theme, and you're set:

You might also want to vote for LPS-40571 and LPS-53664 to get this feature out-of-the-box again.

Blogues
Hi Olaf,
I tried to implement liferay polls portlet friendly url, but unfortunatlydid not manage tomake it work.
I followed the docs and wikis found in liferay web site, may beI missedsome thing.

<?xml version="1.0"?>
<!DOCTYPE routes PUBLIC "-//Liferay//DTD Friendly URL Routes 6.2.0//EN" "http://www.liferay.com/dtd/liferay-friendly-url-routes_6_2_0.dtd">
I'mreally new to liferay, please can you help me to fix it ?

Thanks alot
Nabil
@Olaf: Two things seem to be given for each major Liferay release. My own excitement, and your portlet drag and drop post. I almost find myself hoping the feature doesn't make it into core, just so the tradition of your post isn't broken. emoticon emoticon emoticon
@Olaf - You know. I just realized. To utilize the power of LR-7, instead of trying to get this added to the default theme, one (notice the unpersonal pronoun ;) ) should probably make this as a themelet, and have @Nate add it as a default themelet option in the new front-end project.
@Brendan I'll try that when I finally get to installing the zoo of frontend-tools. However, once I succeed with this, this series might end - is that what you want to tell me ;) ? Don't tell me you're missing my next version's article then
Hi ,
I am using DXP and have to create a project where user can add and than drag and drop,show and hide (accordion) portelts inside the layout. I don't know where to see the source for it so that i could change it based on my needs...the javascript and css file...where to look for implementation in liferay source?

Thank you!
Vishwa Jeet, this sounds unrelated to the (purely visual) effect of showing where you can drop portlets. Also, more information would be needed for answering this question (e.g. "the source for *it*" - I don't understand what you're looking for, as there's no accordion in Liferay) . Please check the forums at https://web.liferay.com/community/forums/ and ask your question there.
Thank you OLAF for your reply.
Actually i just want to know how to override liferay javascript to drag and drop portlet. For e.g. in portlet.ftl there is a html header tag called "portlet-toper", mouse over on it change the cursor to 'move' icon and we can drag and drop the portlet. Now, I want to add an icon in portlet-toper header and only this icon can be used for dragging the portlet not whole header. To achieve that, i need to see where is the JS code for it and i'm not able to find it yet...

Thank you.
ok, understood. Still: Forums are the way to go. More eyes there, not just mine. And I'm not the best reference you can find on UI implementation of this level of detail ;)
Alternatively the Liferay slack channels: https://community-chat.liferay.com
Lots of activity there now, and a lot of knowledgeable people willing to help out.

Thank you Olaf for this post! It inspired me to include this CSS in a themelet, so it removes the pain of adding it manually each time you create a theme. https://www.npmjs.com/package/liferay-dropzone-themelet