Drag and Drop Data Entry
A recent need at work was to find a way for assist users in data entry tasks so as to help eliminate common data entry mistakes (transposition, wrong data, etc..). Although copying and pasting was the first thought, we eventually decided to use drag and drop technology.
The scenario is something like this; we get applications from customers, both new and existing, and we use certain demographic criteria to match up these applications with existing customers (these customers rarely remember things like unique ID’s, etc…). This process yields a split screen scenario with the application information on the left, and the possible matches on the right. There could be more than one match on the right side, and their are sometimes reasons when the data entry specialist may want to take data from different existing records.
The initial thought was to place a radio button next to each of the possible matches and simply have the DE specialist pick one, but the requirement that they may take information from different existing records made that impossible.
We then looked at the simple idea of copying and pasting the information, by writing javascript so a person need only to double click on the desired field, which would copy the innerHTML of the DIV to the clipboard, then the DE specialist could then paste the data into the field. Oddly enough we ran into issues where the DE specialist would not know what information was still in the clipboard and would inadvertently paste the wrong data into the wrong field.
So I set out to find anyone who had already written a javascript library that would allow a user to drag a piece of text into a field, only to find nothing, so here we are. Drag and Drop libraries for javascript abound, and my primary library is still YUI, so my example is done with YUI. Our DE specialist will see the collection of existing pieces of data on the right, and they can drag them into the fields on the left.
I am willing to bet that I can use this method on other HTML inputs like selects and checkboxes, simply by using a function to iterate through the inputs.