How would you do this?

I need to build a configuration tool. This tool will show a database table
layout on the right and an XML tree structure on the left. The user will drag
and XML node and drop it on top of the table column that corresponds to
the XML node in order to build a relationship between the XML node and the
table column. For example, let’s say I have this layout.

XML Tree                                  Column Name
------------------                        ---------------
<AvailableBatch>                          id_product        
  <Available>                             id_supplier       
    <Sku />                               id_manufacturer   
    <Part />                              ean13             
    <Qty />                               quantity          
    <Time />                              price             
  </Available>                            wholesale_price   
</AvailableBatch>                         reference         

I want the user to be able to drag the Sku node and drop it on the
supplier_reference “column” to “relate” the two. This is going to be used for
an import utility that will be generic enough that a user can build his own
configuration and his XML will be imported into his database based on the

I already have some thing similar using the jQuery dragtable plugin here but
it was using only one row because it is used to reorder the columns in one

Any other ideas on what I should use or if there are any ready-made
components that can do the job?

Before you get to dragging things around, you may want to keep your user interface simplified by using checked items to indicate which ones to use. Then you can get the rest of the mechanisms working.

Using drag and drop to put different items in place is just a presentational change to the selecting checkboxes.

Yes, I’ve seen that one. Just not sure how to modify it.

Have a look at which uses a similar interface to what you’re after. You should be able to customise it as needed.