Skip to content

Instantly share code, notes, and snippets.

@olafk

olafk/liferay-6.2-drag-drop-indicator-cssonly

Last active September 20, 2018 06:59
Show Gist options
  • Save olafk/6136c445bbe517b873f6 to your computer and use it in GitHub Desktop.
Save olafk/6136c445bbe517b873f6 to your computer and use it in GitHub Desktop.
Download ZIP
liferay-6.2-drag-drop-indicator-cssonly
Raw
liferay-6.2-drag-drop-indicator-cssonly
.portlet-dropzone {
transition: padding 0.5s linear;
}
.yui3-dd-drop-active-valid .portlet-dropzone {
outline: 1px dotted black;
padding: 10px;
margin: 3px;
min-height: 100px;
}
@olafk
Copy link
Author

olafk commented Feb 19, 2015

updated border to outline after Pier Paolo's response on https://www.liferay.com/web/olaf.kock/blog/-/blogs/dragging-and-dropping-portlets

@quodos
Copy link

quodos commented Sep 20, 2018 •
edited

This is great! I added another visual indicator on hover to further improve the usability on a Liferay 7.1 project:

.portlet-dropzone {
  transition: padding 0.5s linear;
}

.yui3-dd-drop-active-valid {
  .portlet-dropzone {
    min-height: 100px;
    margin: 3px;
    padding: 10px;
    outline: 1px dotted #007bff;
  }

  &.yui3-dd-drop-over {
    .portlet-dropzone {
      background-color: rgba(#ffd901, 0.2);
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment