Adding a button that can allow the user to create editable draggable boxes for the user and/or redirect to a form
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;
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2gmsECD
Comments
Post a Comment