Create a drag-and-drop source

We can extend the default framework for custom behaviors or we can create sources. Sources determine the behavior of drag-and-drop operations. The easiest way to create a source with customized behaviors is to extend one of the default source implementations. There are two default source implementations:

com.ibm.pb.dnd.layout.LayoutColumnSource

Description: Applied to vertical column layout containers

Location: PORTAL_HOME\theme\wp.theme.modules\webapp\installedApps\ThemeModules.ear\ThemeModules.war\modules\pagebuilder\js\pb_dnd_layer.js

com.ibm.pb.dnd.layout.LayoutRowSource

Description: Applied to horizontal row layout containers

Location: PORTAL_HOME\theme\wp.theme.modules\webapp\installedApps\ThemeModules.ear\ThemeModules.war\modules\pagebuilder\js\pb_dnd_layer.js

The following example extends the LayoutColumnSource and adds some custom behavior. A skeleton of the custom class would look like this code:

dojo.provide("customDndSource");
dojo.require("com.ibm.pb.dnd.layout.LayoutColumnSource");
dojo.declare("customDndSource", [com.ibm.pb.dnd.layout.LayoutColumnSource], {
 ghostClass: "someCssClass",  constructor: function() {
 },  onDndStart: function(source, nodes, copy){
  // called when a drag operation starts
 },  onDrop: function(source, nodes, copy){
  // called for a drop operation on a target  },  onDndCancel: function(){
  // called when a drag operation is canceled  },  onOverEvent: function(){
  // called when dragging over a source  },  onOutEvent: function(){
  // called when dragging out of a source  
 }
});
customDndSource.withHandles = true;

The declare method extends the implementation of LayoutColumnSource and there are stub events set up for the drag-and-drop operations:

ghostClass:

A preview placeholdethat displays as you drag over a target container. We can set this preview placeholder by setting the CSS class we want applied to the markup. In the previous example, the CSS class is someCssClass. There are methods defined to create and remove the ghost.

withHandles:

Sets whether the source has a drag handle. The withHandles property of the object is used by the DNDController to set up the source with a handle.

creator:

A creator method is called to visualize a data item for the container or for the avatar. For more information about avatars, see Drag-and-Drop avatars. This method allows us to have different representations of the same data item in different containers and in the avatar.

This creator method is created as a property of the source object, such as:

customDndSource.creator = function(item, hint){
 // logic to create a custom avatar or visualize data in the container };

After created the source and customize the behaviors, configure the source definitions object and apply it to the layout.

Parent: Drag-and-drop
Related:
Drag-and-drop avatars