Matching table fields to csv column headers using sortables

[MrMastermind]

Hi,

 

I'm currently writing an import utility where you can select an CSV file and a table.

From there, the fieldnames from the table will be read and the headers from the CSV file.

After that a function will try to match fieldnames with column headers.

 

But to be more generic, I want to be able to have any table and an CSV, where it could be so that the CSV has more or less column headers then there are fieldnames.

To be able to match fieldnames manually It thought of creating an sortable list, so you can match the column headers. Where the fieldnames would be a static list. Something like:

 

fieldnames          matched column headers            unmatched column headers

1                      A                                         

2                      B

3                      C

4                                                                  E

5                      D

6                                                                  F

                       

 

Looking at the example, you can probably see my issue; sortable lists will "collapse" the list and have no empty "slots". So my question would be, how can I create the "matched column headers" and the "unmatched column headers" as a sortable drag&drap list providing some sort of gaps/"slots" to put the unmatched columns in. Or to be able to set a column header matched to an other available fieldname?

 

 

[MrMastermind]

Ok, I've come a long way. I've created a solution to the problem by creating multiple sortable div's where div's from another list can be dragged into. One small issue remains. I now need to be able to restrict the sortables used as "drop-div's" to only allow one item. So I need to find a way to revert a draggable div when the sortable it is dropped on already contains an item (or element).

 

I figure I have to do that in the onUpdate event, but have no clue how to do it.

 

Any suggestions?