How to render component on drop event?

1

Hi, We are trying to create a website builder (drag and drop). So, we have elements on left side and are dropped into right side(the page). Now, I have defined droppable regions on right side. What I want it, when I drop the module from left side into droppbale region, it should render that component. The drop action is bubbeld up to controller: This is my code in controller:

export default Ember.Controller.extend({
  actions : {
    addModule : function(dropZone){
      ModuleTitle.create({
                    "id": 2,
                    "type": "ModuleTitle",
                    "ordering": "2",
                    "text": "<h3 style=\"text-align: center\">Sample Title Test</h3>",
                    "rowId": "1"
                  }).appendTo(dropZone);
    }
  }
});

getting the following error:

Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.

I am not sure if this is the right approach to implement such behavior. Please suggest the best approach to achieve this.

Thank you,

Suraj