# Possible Children aka Addons
Since we can change parameters now, we also want to change the configuration structurally. This means adding or deleting elements. To know which children are possible to add we need to listen to the onUpdatePossibleChildren hook. We do this the same way we do it for the parameter event (described in the chapter before).
After we received the possible children we can display them. Now we have two options to activate dock ghosts.
- preview the ghosts via click (touch)
- activate the previews via drag and drop
Let's consider the simpler case first. To display the positions where it's possible to add some child we could enable the user to just click on the child which she or he wants to add. Practically speaking you only need to add a click event listener on the DOM element which represents the child. Doing this for drag and drop is very similar. You only need to listen to the dragstart browser event. To preview the dockings you only need to pass the native drag event to the Roomle Web SDK. The drag event is used to position the preview of the dragged child. Since we use native HTML5 drag and drop in the example it's important to point out that there are some browser quirks. For example it's not always that easy to get rid of the drag ghost. Also there are several drag and drop bugs like the following Firefox problem (opens new window).
In code this looks like:
// add this to the onMounted method
rubensConfiguratorApi.callbacks.onUpdatePossibleChildren = (tags) => {
possibleChildrenTags.value = tags;
};
// export a click handler to preview the dockings
return {
// ...
// ...
showPreviewDockings(possibleChild, dragEvent) {
rubensConfiguratorApi.previewDockings(
possibleChild,
dragEvent,
!!dragEvent ? true : false
);
},
// ...
// ...
};
As in the chapter before we do not discuss Vue specifics in detail since you can find them in the Code Sandbox and they are not directly related to the Roomle Web SDK.
The possible children are always updated to the component which is currently selected so be prepared for changes if the user clicks through the configuration.
# Code Sandbox
To see the results of this chapter just visit the Code Sandbox here: