+

Search Tips   |   Advanced Search

Drag-and-drop configuration


Configuration parameters initialized by the theme control the available sources that can be applied to a layout. These source definitions must be defined in the theme before they can be applied to a layout.

A drag-and-drop source represents an item for drag-and-drop operations. It is also used to represent drop targets as well.

    com.ibm.pb.dnd.layout.LayoutSource

    The base class for the default source definitions. This class defines the default behavior for all drag operations and is extended when creating sources.

    com.ibm.pb.dnd.layout.LayoutRowSource

    The drag-and-drop source is used for layout row containers.

    com.ibm.pb.dnd.layout.LayoutColumnSource

    The drag-and-drop source is used for layout column containers.

    com.ibm.pb.dnd.layout.ShelfSource

    The drag-and-drop source is used for items on the site toolbar.

The source definition classes are located at PORTAL_HOME\theme\wp.theme.modules\webapp\installedApps\ThemeModules.ear\ThemeModules.war\modules\pagebuilder\js\pb_dnd_layer.js

The source definition classes are stored in the theme configuration array at ibmCfg.themeConfig.dndSourceDefinitions.

Each item in the drag-and-drop source definition array consists of three parts:

    id

    The CSS class name placed on a layout container.

    object

    The Class module of the drag-and-drop source.

    orientation

    The type of container, vertical, or horizontalthat we are placing the definition on.

The source definitions are defined in the com.ibm.portal.theme.dnd.sources theme metadata. Custom sources can be applied by editing the metadata value. See Changing theme metadata for more details.


Controller

The initialization of drag-and-drop on a page is performed by the init method in the com.ibm.pb.control.DNDController class.   The drag-and-drop Controller is subscribed to the page change event that is broadcast when entering page edit mode.  When the page change event is broadcast, the drag-and-drop controller handles the initialization of drag-and-drop for the layout.

The drag-and-drop Controller is at PORTAL_HOME\theme\wp.theme.modules\webapp\installedApps\ThemeModules.ear\ThemeModules.war\modules\pagebuilder\js\pb_dnd_layer.js.


Parent: Drag-and-drop
Related:
Change theme metadata