works with remove thru trash can

rowers/templates/stepeditor.html

@@ -7,8 +7,12 @@
 
 {% block main %}
 <h2>Plan Training Steps</h2>
-
 <div class="stepcontainer" id="list">
+<section class="drop-zone">
+<h2>Training</h2>
+</section>
+<section class="library">
+  <h2>Library</h2>
   {% for step in steps %}
   <div draggable="true" class="trainingstep" style="background-color: {{ step.color }}">
     <div  id="{{ forloop.counter }}" class="stepcontent">
@@ -17,6 +21,10 @@
   </div>
   {% endfor %}
 </div>
+</section>
+<section class="trash-can">
+  <h2>Remove</h2>
+</section>
 {% endblock %}
 
 {% block scripts %}
@@ -24,69 +32,111 @@
         src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
 </script>
 <script>
-  document.addEventListener('DOMContentLoaded', (event) => {
-    var list = document.getElementById('list')
+    let dragged;
 
-    function handleDragStart(e) {
-      this.style.opacity = '0.4';
-      dragSrcEl = this;
-
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('text/html', this.innerHTML);
+    function handleDragStart(event) {
+      let target = event.target;
+      if (target) {
+        dragged = target;
+        event.dataTransfer.setData('text', target.id);
+        event.dataTransfer.dropEffect = 'move';
+        // Make it half transparent
+        event.target.style.opacity = .3;
+      }
     }
 
-    function handleDragEnd(e) {
-      this.style.opacity = '1';
-
-      items.forEach(function (item) {
-        item.classList.remove('over');
-      });
+    function handleDragEnd(event) {
+      if (event.target) {
+        // Reset the transparency
+        event.target.style.opacity = ''; // reset opacity when drag ends
+        dragged = null;
+      }
     }
 
-    function handleDragOver(e) {
-      if (e.preventDefault) {
-        e.preventDefault();
+    function handleDragOver(event) {
+      if (event.preventDefault) {
+        event.preventDefault();
       }
 
       return false;
     }
 
-    function handleDragEnter(e) {
-      this.classList.add('over');
+    function handleDragEnter(event) {
+      const target = event.target;
+      if (target && dragged) {
+        event.preventDefault();
+        // Set the dropEffect to move
+        event.dataTransfer.dropEffect = 'move'
+        target.style.background = '#1f904e';
+      }
     }
 
-    function handleDragLeave(e) {
-      this.classList.remove('over');
+    function handleDragLeave(event) {
+      console.log(event.target.nodeName);
+      event.target.style.background = '';
     }
 
-    function handleDrop(e) {
-      e.stopPropagation();
+    function trash(event) {
+      const target = event.target;
+      console.log("trash", target)
+      target.style.backgroundColor = '';
+      if (target && dragged) {
+        event.preventDefault();
+        console.log(dragged.parentNode.className);
+        if (dragged.parentNode.className == "drop-zone") {
+          dragged.remove();
+        }
+      }
+    }
 
-  if (dragSrcEl !== this) {
-    dragSrcEl.innerHTML = this.innerHTML;
-    this.innerHTML = e.dataTransfer.getData('text/html');
-    var steps = []
-    var nl = document.querySelectorAll(".stepcontainer .trainingstep .stepcontent");
-    nl.forEach((s) => {
-      console.log(s.id);
-      steps.push(s.id)
-    })
-    console.log(steps);
+    function handleDrop(event) {
+      const target = event.target;
+      if (target && dragged) {
+        target.style.backgroundColor = '';
+        event.preventDefault();
+        // Get the id of the target and add the moved element to the target's DOM
+        // dragged.parentNode.removeChild(dragged);
+        if (target.nodeName == "SECTION") {
+          dragged.style.opacity = '';
+          var dropped = dragged.cloneNode(true);
+          target.appendChild(dropped);
+        }
+        if (target.nodeName == 'DIV') {
+          // insert after
+          dragged.style.opacity = '';
+          var dropped = dragged.cloneNode(true);
+          if (target.parentNode.nodeName == 'SECTION') {
+            target.after(dropped);
+          }
+        }
+      }
   }
 
-  return false;
-}
+  function noDrop(event) {
+    event.preventDefault();
+  }
 
+
+    let dropzone = document.querySelector('.drop-zone')
+    dropzone.addEventListener('dragenter', handleDragEnter);
+    dropzone.addEventListener('dragleave', handleDragLeave);
+    dropzone.addEventListener('drop', handleDrop)
+    dropzone.addEventListener('dragover', handleDragOver);
+    dropzone.addEventListener('dragstart', handleDragStart);
+    dropzone.addEventListener('dragend', handleDragEnd);
+    let trashcan = document.querySelector('.trash-can');
+    trashcan.addEventListener('drop', trash)
+    trashcan.addEventListener('dragenter', handleDragEnter);
+    trashcan.addEventListener('dragleave', handleDragLeave);
+    trashcan.addEventListener('dragover', handleDragOver);
     let items = document.querySelectorAll('.stepcontainer .trainingstep');
     items.forEach(function(item) {
       item.addEventListener('dragstart', handleDragStart);
-      item.addEventListener('dragover', handleDragOver);
-      item.addEventListener('dragenter', handleDragEnter);
-      item.addEventListener('dragleave', handleDragLeave);
       item.addEventListener('dragend', handleDragEnd);
-      item.addEventListener('drop', handleDrop);
+      item.addEventListener('drop',noDrop);
+      item.addEventListener('dragenter',noDrop);
     });
-  });
+
 </script>
 {% endblock %}
 

static/css/rowsandall2.css

@@ -325,7 +325,7 @@ th.rotate > div > span {
 
 .stepcontainer {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 10px;
 }
 
@@ -341,6 +341,22 @@ th.rotate > div > span {
   border: 3px dotted #666;
 }
 
+.drop-zone {
+  position: relative;
+  overflow: hidden;
+  background: #878787;
+  color: white;
+  padding: 10px;
+}
+
+.trash-can {
+  position: relative;
+  overflow: hidden;
+  background: red;
+  color: white;
+  padding: 10px;
+}
+
 .divlines {
     display: block;
     overflow-x: hidden;