Advanced D&D Interface Concept - how to add components or childviews based on dropped item


#1

I’m currently developing an Ember App for combining magnetic ornaments ( see screenshot link ).

http://postimg.org/image/teopcbl5z/

On the left the user selects a category and then has the ability to chose main parts ( the long necklaces you see in the subcategory “Unsere Halsketten” & “Unsere Armbänder” ) or smaller parts, called elements (“Unsere Elemente”) which then can be dropped into the “Drop Area”.

In this early stage of development the drop area is simply a ember component which displays the content of an array (template: each item in array) . When a user drops an item to the drop area it’s id is transfered through dataTransfer and a controller action (called from the component )fetches the item from the store and pushes it to the array.

As the necklaces have 2 open connections to add another item ( the items have magnetic connections) the goal now is to have a dynamic drop zone.

I’ll explain:

The user drops a necklace (e.g. “ART_HALS_1”) to the drop area. As it is a part with 2 open connectors and it is a necklace (it is big) i now want it to appear in drop center. Now that there’s 2 open connections i need the drop center to have 2 additional drop areas added ( drop-left & drop-right) on top of it so there can be another item attached to it (like elements “Unsere Elemente”).

As this is my first ember project I’m not really sure how i should continue from here.

I started reading into containerView and collectionView but i cannot figure out a good concept.

If anybody could help me giving a path in which direction i should go, i would be very thankful for that!

Greetings Chris