CODEWITHSUNDEEP
javascriptjquery
Timur
Timur

Reputation: 382

JQuery Drag and Drop from two tables

I need to implement drag and drop feature form one table to another and vise versa.

This is my function where i get transactions to particular IBAN number, I also have the same function which retrieves users transaction which are hidden.

   function getAllTransactions(iban) {
    var iban = $("#ibanSelection").val();
    var username = $("#hiddenusername").val();
    var url = 'http://localhost:64300/api/BankAccountApi/GetUserTransaction/?iban=' + iban;
    var table = "<table id=\"table1\">";
    if ((username != "") && (iban !="")) {
        $.getJSON(url, function (data) {
            table += "<tr class=\"ibanSelection\">";
            table += "<th>My IBAN</th>";
            table += "<th>Send to IBAN</th>";
            table += "<th>Transfer Date</th>";
            table += "<th>Amount</th>";
            table += "</tr>";
            $.each(data, function (key, val) {
                table += "<tr class=\"draggable_tr\">";
                table += "<td>" + val.My_Iabn + "</td>";
                table += "<td>" + val.Iban_To + "</td>";
                table += "<td>" + val.Transfer_Date + "</td>";
                table += "<td>" + val.Amount_Transferd + "</td>";
                table += "</tr>";
            });
            table += "</table>";
            $("#divResult2").html(table);
        }); 
    }
}

Upvotes: 0

Views: 1004

Answers (1)

Rafał Mnich
Rafał Mnich

Reputation: 546

Just use the jQueryUI Sortable feature. Here's the complete example + documentation. Very easy.

Also this example shows your case:

http://jqueryui.com/sortable/#connect-lists

Upvotes: 1

Related Questions