In general my approach is:
- Start with a function which produces plain HTML (often literally the PlainHTML type)
- If it needs state, pass that state as an input to the function but store & manage that state in a parent component
- If it needs a behavior, pass the relevant action as an input to the function and use it as an event handler but handle the action in a parent component
- If you want to reuse this function with its state and actions with multiple parent components, then write a type synonym for its relevant state and a helper function to use for its actions in the parent handleAction
The previous steps are a spectrum: if at any point along the way from 1-4 you feel like this is just too much to be managing in a parent component, switch to encapsulating the state and behaviors in a child component instead.
So to answer your question I would try using one component and have drag and drop together, and if it starts to feel like too much then try splitting into sub components.
Usually I find that as soon as I switch from one component to multiple that it becomes obvious pretty quickly whether it was a good idea or not.
You may also be interested in this similar discussion on Real World Halogen with @cmdv: