I am still confused as the drag and drop works in my own project. I assumed the onDrop was being fired from the HTML input field using k-drop="onDrop" as I am not executing the onDrop() anywhere in my js, only in my html.
in fact if I update my local code with your update
And I keep the onDrop in my HTML
My input field gets updated twice so that I get [Area][Area] on one drag and drop.
I will keep going through your example and try to understand the system better and why mine works locally but not on the plunker.
Unfortunately this does not help with my actual problem, I am not too worried that Kendo was not working correctly on the plunker, what I am trying to achieve is for the kendo drag and drop to function the same way as how the first example uses html DataTransfer.setData(). This allows me to drag a header from the table and place it in any location in the input field as if I have copied and pasted the text.