My goal is to create a bunch of sectioned off containers that a card into said containers. Its similar to how some Kanban Boards work. However, for the moment I wish to be able to allow the user to create these cards and drag and edit them whenever they want.

HTML

<div class="container">
        <h3>Unscheduled Projects</h3>
        <p class="draggable" draggable="true" contenteditable="true">1</p>
    </div>

    <div class="container">
        <h3>Ready To Be Developed</h3>
        <p class="draggable" draggable="true" contenteditable="true">2</p>
    </div>

    <div class="container">
        <h3>In Development</h3>
        <p class="draggable" draggable="true" contenteditable="true">3</p>
    </div>

    <div class="container">
        <h3>Ready To Review</h3>
        <p class="draggable" draggable="true" contenteditable="true">4</p>
    </div>

    <div class="container">
        <h3>Completed</h3>
        <p class="draggable" draggable="true" contenteditable="true">5</p>
    </div>

.js

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })

    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})

containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

.css

.container {
    padding: 95px;
    background-color: darkgray;
    width: 10%;
    height: 825px;
    float: left;
    border-style: solid black;
}


.draggable {
    padding: 1rem;
    background-color: grey;
    border: 1px;
    border-style: solid;
    cursor: move;
}

.draggable.dragging {
    opacity: .100;
}