Add basic raceresult entering template with DnD

static/script/draggable.js

@@ -0,0 +1,78 @@
+// https://codepen.io/retrofuturistic/pen/DJWYBv
+
+let dragSrcEl = null;
+
+function handleDragStart(e) {
+    // Target (this) element is the source node.
+    dragSrcEl = this;
+
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', this.outerHTML);
+
+    this.classList.add('dragElem');
+}
+
+function handleDragOver(e) {
+    if (e.preventDefault) {
+        e.preventDefault(); // Necessary. Allows us to drop.
+    }
+    this.classList.add('over');
+
+    e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
+
+    return false;
+}
+
+function handleDragEnter(e) {
+    // this / e.target is the current hover target.
+}
+
+function handleDragLeave(e) {
+    this.classList.remove('over');  // this / e.target is previous target element.
+}
+
+function handleDrop(e) {
+    // this/e.target is current target element.
+
+    if (e.stopPropagation) {
+        e.stopPropagation(); // Stops some browsers from redirecting.
+    }
+
+    // Don't do anything if dropping the same column we're dragging.
+    if (dragSrcEl != this) {
+        // Set the source column's HTML to the HTML of the column we dropped on.
+        //alert(this.outerHTML);
+        //dragSrcEl.innerHTML = this.innerHTML;
+        //this.innerHTML = e.dataTransfer.getData('text/html');
+        this.parentNode.removeChild(dragSrcEl);
+        let dropHTML = e.dataTransfer.getData('text/html');
+        this.insertAdjacentHTML('beforebegin', dropHTML);
+        let dropElem = this.previousSibling;
+        addDnDHandlers(dropElem);
+    }
+
+    this.classList.remove('over');
+    return false;
+}
+
+function handleDragEnd(e) {
+    // this/e.target is the source node.
+    this.classList.remove('over');
+
+    /*[].forEach.call(cols, function (col) {
+      col.classList.remove('over');
+    });*/
+}
+
+function addDnDHandlers(elem) {
+    elem.addEventListener('dragstart', handleDragStart, false);
+    elem.addEventListener('dragenter', handleDragEnter, false)
+    elem.addEventListener('dragover', handleDragOver, false);
+    elem.addEventListener('dragleave', handleDragLeave, false);
+    elem.addEventListener('drop', handleDrop, false);
+    elem.addEventListener('dragend', handleDragEnd, false);
+
+}
+
+const cols = document.querySelectorAll('#columns .column');
+[].forEach.call(cols, addDnDHandlers);

static/style/draggable.css

@@ -0,0 +1,21 @@
+/* https://codepen.io/retrofuturistic/pen/DJWYBv */
+
+[draggable] {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* Required to make elements draggable in old WebKit */
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
+}
+
+.column {
+  cursor: move;
+}
+
+.column.over {
+  //border: 2px dashed #000;
+  border-top: 2px solid blue;
+}

templates/enter.jinja

@@ -0,0 +1,51 @@
+{% extends 'base.jinja' %}
+
+{% set active_page = "/enter" %}
+
+{% block title %}Formula 10 - Race Result{% endblock title %}
+
+{% block head_extra %}
+    <link href="../static/style/draggable.css" rel="stylesheet">
+    <script src="../static/script/draggable.js" defer></script>
+{% endblock head_extra %}
+
+{% block body %}
+
+    <div class="card shadow-sm" style="width: 450px;">
+        <div class="card-body">
+            <h5 class="card-title">{{ race.grandprix }}</h5>
+
+            <form action="/enterresult" method="post">
+                <ul id="columns" class="list-group list-group-flush">
+                    {% for driver in drivers %}
+                        <li class="list-group-item column p-1" draggable="true">
+                            {{ driver.name }}
+
+                            <div class="d-inline-block float-end">
+                                {# Driver DNFed #}
+                                <div class="form-check form-check-reverse d-inline-block">
+                                    <input type="checkbox" class="form-check-input" value="{{ driver.name }}"
+                                           id="dnf-{{ driver.name }}" name="dnf-drivers">
+                                    <label for="dnf-{{ driver.name }}" class="form-check-label text-muted">DNF</label>
+                                </div>
+
+                                {# Driver Excluded #}
+                                <div class="form-check form-check-reverse d-inline-block mx-2">
+                                    <input type="checkbox" class="form-check-input" value="{{ driver.name }}"
+                                           id="exclude-{{ driver.name }}" name="exclude-drivers">
+                                    <label for="exclude-{{ driver.name }}" class="form-check-label text-muted">Exclude</label>
+                                </div>
+                            </div>
+
+                            {# Standing order #}
+                            <input type="hidden" name="pxxdrivers" value="{{ driver.name }}"></li>
+                    {% endfor %}
+                </ul>
+
+                <input type="submit" class="btn btn-danger mt-2" value="Save">
+            </form>
+
+        </div>
+    </div>
+
+{% endblock body %}