Mi objetivo es crear un montón de contenedores seccionados que una tarjeta en dichos contenedores. Es similar a cómo funcionan algunos tableros Kanban. Sin embargo, por el momento deseo poder permitirle al usuario crear estas tarjetas y arrastrarlas y editarlas cuando quiera.

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; }