How to drag a drop elements into input fields

How to drag a drop elements into input fields

I'm trying to develop a page that has the following functionality:
Page will have two columns: one being #origin(left column), containing a
lot of rectangles(which represent variables), and the second one will be
#drop(right column),containing inputs where the rectangles can be dropped
on.

In order to get the result I want , I'd thought of using two plugins:
jquery ui draggable and jQuery Tokeninput
The question is , how can I make that once I drop a rectangle( <li> ) into
an input field , it is displayed as a tag. It'd also be OK to use the same
<li> element , so long I can enter more text into the input(to complete a
formula) ,and if later the user changes its mind and decides that the
variable (tag) was not the one he or she wanted, the page should allow
them to delete the tag(by clicking the "X" in the top-right corner or
returning the tag to its original location on the left column)
Has someone done something similar already and can give me some guidance??
Or has someone another idea for this?
Any help is greatly appreciated.