Create a drag-dropable JSON elements from a tree into a CodeMirror textarea

There are two sections in the following image, one is “App data” (RHS) from where user will drag the element (example: Row ID, Row Number etc.) and another is “Columns” (LHS) where user will drop the element (example: Employee Id textbox). Whenever user drag/drop an element, it should be visible while moving cursor and dropping it. User should be able to drop multiple elements in a single textbox(Code Mirror). Once the element is dropped into the textarea(Code Mirror) the HTML component from the tree should be mapped EXACTLY into the textarea and should contain the key of the JSON when trying to convert the textarea(Code Mirror) into value. To sum up: JSON tree which will contain JSON elements, draG drop into Code Mirror instances(multiple), on get value button click, should return JSON key of dropped element of each Code Mirror instance element.