From cd3e95cb96d8431a232fd401c00c0d5a5a5332d5 Mon Sep 17 00:00:00 2001
From: Nagellan <31626879+Nagellan@users.noreply.github.com>
Date: Thu, 25 Apr 2019 00:43:07 +0300
Subject: [PATCH] Add drag & drop functionality

---
 index.html |  4 ++--
 script.js  | 17 +++++++++++++++++
 styles.css |  5 +++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 476a28e..463b647 100644
--- 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 method="POST" class="column new" action="" onsubmit="return false"><input type="hidden" name="convertGET" value="1">
+            <form method="POST" class="column new" action="" onsubmit="return false" ondragover="dragOver(event)" ondrop="drop(event, this);"><input type="hidden" name="convertGET" value="1">
                 <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
index c78715d..95f0a88 100644
--- 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))
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index cd751da..770189b 100644
--- 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 {