Customize drop targets on the page

In edit mode, portal renders drop targets for all positions where a portlet can be added to the page. In the default theme, these drop targets are hidden unless an item is dragged over the surrounding container.

The markup for drop targets is defined in a file named DropTarget.html, which lies in the current skin folder in WebDAV. For example...

fs-type1/themes/Portal8.5/skins/Hidden/DropTarget.html

The markup in DropTarget.html is always surrounded by a <div> tag, representing the drop target control component. Inside the <div> tag is an anchor tag that references the control-component at the position where a dropped item is inserted. For example:

<div class="portlet-window       component-control=portal-drop-target       id=ID_of_control_component_at_insert_position">
 <a class="portlet-window-ref"     href="#ID_of_control_component_at_insert_position"></a>
         <DropTarget.html>
 </div>

The styling for the CSS classes can be found in the default.css in...

fs-type1/themes/Portal8.5/css/default/default.css

A theme developer can customize the drop zones either by editing the default.css or by modifying the DropTarget.html, or both.

Firefox currently does not support automatic scrolling during a drag-and-drop operation. There are plug-ins available to add this support to Firefox.

Parent Drag-and-drop