自定义字段映射，拖放HTML / JS

Question

I need to create an interface where users can "map" fields to other fields.

The fields on the left are internal Database fields, and the fields on the right are fields which exist in an external CRM application.

The user needs to be able to map fields, for example if they decide to map 3 fields (firstname, company and email address) the UI would show in some form that the internal field firstname maps to the external field FirstName.

I do not have any code to show, just wondering if someone knows of any tools/jquery plugins?

My current idea is to have 2 select boxes and have the user select a value in both and click Add Mapping. This would work but just wondering if there are slicker ways out there.

Answer 1

There is jQuery's Draggable which allows elements to be moved using the mouse.

And, then there is also jQuery's Droppable which creates targets for draggable elements.

They both combined can help you create your HTML interface.

All the best.