Drag and drop interface for SQL database table map

2019-07-03 02:55发布

问题:

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.