+

Search Tips   |   Advanced Search


Page builder drag-and-drop

One of the features of the page builder is its drag-and-drop capability.

In Page Builder you can drag-and-drop two types of resources, pages and portlets:

Limitations: The page builder drag-and-drop feature does not support multi-selection and copying resources.

For details about Dojo and drag-and-drop refer to the documentation link given below.


Portlet drag-and-drop

In the theme Default.jsp there are parameters set for the ibmPortalConfig object that define the drag-and-drop behaviors for dragging portlets:

dndPortletsWithHandles

This parameter defines whether containers have drag handles enabled. Default is true.

dndPortletsWithGhost

This parameter defines whether a shadow is displayed while dragging. Default is true.

portletDndSource

This parameter defines the drag source class to be used. The default value is com.ibm.portal.dnd.PortletSourceGhost.

In the file Default.jsp the portlet drag-and-drop is initialized by the following line:

dojo.addOnLoad(com.ibm.portal.dnd.PORTLET_MEDIATOR.init);
The portlet drag-and-drop classes are located with the portal Dojo Resources application. The location of the classes is as follows:

profile_root/installedApps/node/Dojo_Resources.ear/dojo.war/com/ibm/portal/dnd

The files at that location are used in addition to the core Dojo drag-and-drop functionality. These files are listed in the following:

PortletMediator.js

This source class includes the initialization code, the avatar creator. It connects to the Dojo drag-and-drop events that are published to trigger the update of the UI.

PortletAvatar.js

This source class overrides the default Dojo avatar construct method to display the portlet contents while dragging.

PortletSource.js

This source class uses the default drag-and-drop styling for portlets.

Set this class name as the value of portletDndSource in the ibmPortalConfig object to use the default Dojo styling.

PortletSourceGhost.js

This source class uses a shadow to preview the placement of portlets.

It is set as the default value class name for portletDndSource in the ibmPortalConfig object. To restyle the shadow, modify the class ibmPortalDndGhost. It is located in the file

profile_root/installedApps/[node]/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/portal.css


Page drag-and-drop

The page drag-and-drop classes are located with the portal Dojo Resources application. The location of the classes is as follows:

profile_root/installedApps/[node]/Dojo_Resources.ear/dojo.war/com/ibm/dnd

ModeledSource.js

This source class provides dnd operational support to a modeled widget. You can extend it to provide different drop actions and drop zones, depending on the type of data that is dragged around.

PageAvatar.js

This class constructs the avatar for page tabs by overriding the default Dojo implementation. Opacity for the avatar is applied by the class ibmPortalDndPageAvatar assigned by the creator method. To restyle the page avatar, modify the class ibmPortalDndPageAvatar. It is located in the file

profile_root/installedApps/node/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/portal.css

PageCreator.js

This class creates the node that is used as the avatar while dragging.

By default this is a gray box with the page title.

The navigation widget has several parameters passed in to enable and modify drag-and-drop behavior. The navigation widgets are initialized within the Tab Menu - Page Builder theme by the file NavWidget.jspf.

dndEnabled

This toggles drag-and-drop with in the widget. Default is true

dndType

This is the type specified for page nodes. Default is cmNode.

dndAccept

This is the type that page nodes accept. Default is cmNode.

dndCreator

This is the creator method that creates the avatar node. The default value is com.ibm.dnd.PAGE_CREATOR.creator.


Avatars

To modify the avatars, the portal provides a creator function. For portlets it is located in the file PortletMediator.js; for pages it is located in the PageCreator.js.

The method creator checks whether the hint parameter is equal to avatar. If yes, it creates the node that is used to display while dragging. refer to the following example:

creator: function(item, hint){ if(hint=="avatar"){
   ...            

Modify this code to create a custom node that is to be used as the avatar.

The default avatar is the portlet markup itself. ... }else{ ... When there is no avatar creator function given, a default avatar is created. The default avatar is based on the one defined in dojo.dnd.Source in the functions _normalizedCreator/onDropExternal." ... }}


Parent topic:

Work with page builder


Related tasks


Creating top level page tabs
Move page tabs
Creating child pages
Move child pages
Add content
Changing page style
Changing page layout
Share pages
Use a different Dojo version


Related reference


Hints and tips for page builder


Related information


Dojo drag and drop:   http://docs.dojocampus.org/dojo/dnd