Drag and Drop

[aidenhuynh]

Drag and drop (3/6)

Started out by implementing jQuery UI and testing its draggable and droppable methods, and learned to use different headers to achieve different results.

<!-- Link jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Link jQueryUI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" type="text/javascript"></script>

In the following code block, we have the headers "revert", "scroll", and "containment", which I use to make the boxes return to their original positions after being dropped so that I can swap the content of the boxes rather than the boxes' positions. The scroll and containment make sure that they can not be dragged out of bounds.

const table = $(`#${tableId}`)

    table.draggable({
        revert: true,
        scroll: true,
        containment: $("#table-div")
    })

Eventually got to fully implement swapping functionality between tables by swapping the content of the table divs.

function dragDrop(nameId) {
    console.log("run")
    const table = $(`#${tableId}`)

    table.draggable({
        revert: true,
        scroll: true,
        containment: $("#table-div")
    })

    table.droppable({
        drop: function(event, ui) {
            var draggable = ui.draggable
            var droppable = $(this)

            var parent1 = draggable.parent()
            var parent2 = droppable.parent()

            temp = draggable

            parent1.children()[1].remove()
            parent1.append(droppable)

            parent2.append(temp)
        }
    })
}

For the next steps, I realized that I'm supposed to make MEMBERS swappable, not WHOLE TABLES, so I will change the code a little to fix that. Also, there is a weird animation thing that happens with the jQuery methods so I will work on making that looks smoother as well.