I have a application in which user maps one table column to other table column .
To do this I have developed a screen in html which initially shows two tables in two separate pane facing each other and then to map user can select column and then drag and drop to other target table column .
But User faces problem when column list is huge , below are list of problems :
Problem 1 : User need to scroll first and then drag and drop to target if list is huge.
Problem 2: If mapping connection increases Lines start's overlapping with each other , so its not informative
Problem 3 : First column of source column could be mapped to target column last and to view it need to be scrolled and if not it shows half .
I am now thinking of rebuilding it with different UI using canvas html which can have transition and animation .
Can you suggest some different way to show this mapping which solves above problem .
Current UI sketch :