Have this problem, that I can't get my head around. I have absolutely no idea where to start with this.
I have these two simplified tables (MSSQL):
Table 1
-------
ID | LetterCode
---------------------
1 | ABC
2 | DEF
3 | GHI
Table 2
-------
ID | NumberCode | MappedTo | ConcatCode
----------------------------------------------------------
1 | 123 | |
2 | 456 | |
3 | 789 | |
What I need to build is an web interface (GUI, site is built using dotnet core) where a user will have two panels:
- Left panel will display contents of Table 1
- Right panel will display contents of Table 2
I need a user to be able to drag the letter code from left panel, and drop it into 'MappedTo' column in the right panel.
When this happens I need to save the letter code in table 2 and create the concatenated code in ConcatCode column.
So for example if we dragged DEF code from left panel to right panel line 1, we would end up with this:
ID | NumberCode | MappedTo | ConcatCode
----------------------------------------------------------
1 | 123 | DEF | 123DEF
I wish I had some code to show but I have no idea how to bite this.
I believe the drag and drop interface can be achieved using jQuery and saving to the database can be achieved through Ajax.
I have found articles that mention this functionality somewhat, like this desktop app: Drag and drop interface but that is not very helpful in my case.
Closest to the answer is this question: Drag and drop contents from one table to another using jQuery
With jsfiddle example here: fiddle
I do not have resources to use Telerik Ui solution. So my question is, is there another library that already does this and I can use, if not I would really appreciate some hints on where to start with this.