Reasoning: Be able to determine what type of item is being dragged over. With this information I can determine if item can be dropped.
Example: "Column" is being dragged over "Task". We want to forbidden dropping the Column on the Task. Column needs to be dropped on a Column.
Implementation note:
- Custom transfer added to
event.dataTransfer
ondragstart
is not accessible ondragover | dragenter | dragend | dragleave | drag
. It is accessible only ondragstart | drop
events. - For this reason I decided to store
item
in the Composableref
.
Final note: I am aware the solution is not perfect. We could use only created Composable and ditch using event.dataTransfer
at all. However the purpose of working on this project was to learn more about "drag and drop" Browser feature. This repo remains a reference to this learning process and that is why I am going to keep this "mixed" implementation of both.