Add drag & drop functionality

Nagellan · Apr 24, 2019 · cd3e95c · cd3e95c
1 parent 327ad5e
commit cd3e95c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -32,11  32,11 @@
         </template>
 
         <template id="empty-card">
-            <div class="card col-container new"><input type="text" placeholder="Write the name of a card"></div>
             <div class="card col-container new" ondragstart="drag(event);"><input type="text" placeholder="Write the name of a card"></div>
         </template>
 
         <template id="empty-column">
-            <form class="column new" action="" onsubmit="return false">
             <form class="column new" action="" onsubmit="return false" ondragover="dragOver(event)" ondrop="drop(event, this);">
                 <div class="title col-container"><input type="text" placeholder="Write the name of a column"></div>
                 <div class="cards-wrapper"></div>
                 <div class="save-cancel-card add-btn col-container">

diff --git a/script.js b/script.js
@@ -2,6  2,7 @@ function addCard(btn) {
     var cardsWrapper = btn.parentElement.getElementsByClassName('cards-wrapper')[0],
         emptyCard = getElementFromTemplate(document.getElementById('empty-card'));
 
     emptyCard.id = "card-"   document.getElementsByClassName('card').length;
     cardsWrapper.appendChild(emptyCard)
 
     replaceBlock(btn, getElementFromTemplate(document.getElementById("save-cancel-card")));
@@ -16,6  17,7 @@ function saveCard(btn) {
     if (cardInput.value.replace(/\s/g, '') != "") {
         cardInput.readOnly = true;
         card.classList.remove('new');
         card.setAttribute('draggable', true);
         replaceBlock(btn.parentElement, addCardBtn);
     }
     else {        
@@ -78,4  80,19 @@ function getGrandParent(el) {
  */
 function getElementFromTemplate(template) {
     return template.content.children.item(0).cloneNode(true);
 }
 
 function drag(e) {
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData('card-id', e.target.id);
 }
 
 function dragOver(e) {
     e.preventDefault();
 }
 
 function drop(e, block) {
     e.preventDefault();
     var cardId = e.dataTransfer.getData('card-id');
     block.getElementsByClassName('cards-wrapper')[0].appendChild(document.getElementById(cardId))
 }
diff --git a/styles.css b/styles.css
@@ -104,8  104,13 @@ main::-webkit-scrollbar {
     box-shadow: 0px 1px 4px rgba(9, 45, 66, 0.25);
 }
 
 .card:not(.new):hover {
     cursor: move;
 }
 
 .card input {
     width: 100%;
     cursor: inherit;
 }
 
 .card input::placeholder {