demo of drag/drop and JS to capture the new order

rowers/templates/stepeditor.html

@@ -0,0 +1,95 @@
+{% extends "newbase.html" %}
+{% load static %}
+{% load rowerfilters %}
+
+{% block title %}Rowsandall Training Plans{% endblock %}
+
+
+{% block main %}
+<h2>Plan Training Steps</h2>
+
+<div class="stepcontainer" id="list">
+  {% for step in steps %}
+  <div draggable="true" class="trainingstep" style="background-color: {{ step.color }}">
+    <div  id="{{ forloop.counter }}" class="stepcontent">
+    {{ step.name }}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script type='text/javascript'
+        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')
+
+    function handleDragStart(e) {
+      this.style.opacity = '0.4';
+      dragSrcEl = this;
+
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/html', this.innerHTML);
+    }
+
+    function handleDragEnd(e) {
+      this.style.opacity = '1';
+
+      items.forEach(function (item) {
+        item.classList.remove('over');
+      });
+    }
+
+    function handleDragOver(e) {
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+
+      return false;
+    }
+
+    function handleDragEnter(e) {
+      this.classList.add('over');
+    }
+
+    function handleDragLeave(e) {
+      this.classList.remove('over');
+    }
+
+    function handleDrop(e) {
+      e.stopPropagation();
+
+  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);
+  }
+
+  return false;
+}
+
+    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);
+    });
+  });
+</script>
+{% endblock %}
+
+{% block sidebar %}
+{% include 'menu_plan.html' %}
+{% endblock %}