Table Generator - Additional Dropzone for Adding Members to a Table

[aidenhuynh]

Implementation

When a table is generated, instead of a margin beneath the last student, the code now adds an invisible <tr> element with an empty <td> element inside of it. This is used as a dropzone for students to be dragged to, allowing for new members to be added to teams.

The creation of these elements can be seen in the makeTables() function here:

// invisible dropzone beneath last student for adding more to table
const dropzone = document.createElement("tr")
dropzone.id = `dropzone-${n+1}`
dropzone.className = "dropzone"

// empty <td> that spans whole row
const dropzoneData = document.createElement("td")
dropzoneData.colSpan = "2"

dropzone.appendChild(dropzoneData)
table.appendChild(dropzone)

The logic for adding new members to teams can be seen here, as the student's name is removed from the old table and inserted before the invisible <tr> element.

function tableDroppable(id) {
    $(`#${id}`).droppable({
        classes: {"ui-droppable-hover":"dropzone-hover"}, // changes background color to dark blue on hover
        drop: function(event, ui) {
            var draggable = ui.draggable
            var droppable = $(this)

            // get parent objects and indexes of each element
            var parent1 = draggable.parent()
            var parent2 = droppable.parent()

            // if same parent do not run
            if (parent1.children().is(droppable)) {
                return
            }

            // Detach from old table and insert before the dropzone
            temp = draggable.detach()
            temp.insertBefore(droppable)

            renumber([parent1, parent2])
        }
    })
}

The dropzone also darkens on hover thanks to the classes option that comes with the .droppable() method from jQuery UI, which is currently being used to swap the regular ui-droppable-hover class to the dropzone-hover class. This can be seen in the previous code block.

Demonstration

• Runtime will add later