New draggable list helper

devel/devel-server.py

@@ -210,7 +210,6 @@ sessionStorage.setItem("id", "devel-server")
         self.end_headers()
         self.wfile.write(body.encode('utf-8'))
     endpoints.append((r"/", handle_index))
-    endpoints.append((r"/{ignored}", handle_index))
 
 
     def handle_theme_file(self):

example-puzzles/example/5/draggable.js

@@ -0,0 +1,75 @@
+// jshint asi:true
+
+var dragSrcEl_
+
+function draggableHandleDragStart(e) {
+  e.target.dataset.moveId = e.timeStamp.toString()
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('text/plain', e.target.dataset.moveId)
+
+  // this/e.target is the source node.
+  e.target.classList.add('moving')
+}
+
+function draggableHandleDragOver(e) {
+  if (e.target.attributes.draggable) {
+    e.preventDefault() // Allows us to drop.
+  }
+
+  e.dataTransfer.dropEffect = 'move'
+
+  return false
+}
+
+function draggableHandleDragEnter(e) {
+  e.target.classList.add('over')
+}
+
+function draggableHandleDragLeave(e) {
+  // this/e.target is previous target element.
+  e.target.classList.remove('over')
+}
+
+function draggableHandleDrop(e) {
+  // this/e.target is current target element.
+  let tgt = e.target
+  let src = document.querySelector("[data-move-id=\"" + e.dataTransfer.getData("text/plain") + "\"]")
+
+  // Don't do anything if we're dropping on the same column we're dragging.
+  if (src == tgt) {
+    return false
+  }
+  
+  let tgtPrev = tgt.previousSibling
+  src.replaceWith(tgt)
+  tgtPrev.after(src)
+  
+  tgt.dispatchEvent(new InputEvent("input", {bubbles: true}))
+}
+
+function draggableHandleDragEnd(e) {
+  // this/e.target is the source node.
+  for (e of document.querySelectorAll("[draggable].over")) {
+    e.classList.remove("over")
+  }
+  for (e of document.querySelectorAll("[draggable].moving")) {
+    e.classList.remove("moving")
+  }
+}
+
+function sortableInit(event) {
+  for (let e of document.querySelectorAll("[draggable]")) {
+    e.addEventListener('dragstart', draggableHandleDragStart, false)
+    e.addEventListener('dragenter', draggableHandleDragEnter, false)
+    e.addEventListener('dragover', draggableHandleDragOver, false)
+    e.addEventListener('dragleave', draggableHandleDragLeave, false)
+    e.addEventListener('drop', draggableHandleDrop, false)
+    e.addEventListener('dragend', draggableHandleDragEnd, false)
+  }
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", sortableInit)
+} else {
+  sortableInit()
+}

example-puzzles/example/5/helpers.js

@@ -78,6 +78,7 @@ function helperActivate(e) {
   }
 }
 
+
 function helperInit(event) {
   for (let e of document.querySelectorAll(".answer")) {
     helperActivate(e)

example-puzzles/example/5/puzzle.moth

@@ -1,6 +1,7 @@
 Summary: Using JavaScript Input Helpers
 Author: neale
 Script: helpers.js
+Script: draggable.js
 Answer: helper
 
 MOTH only takes static answers:
@@ -42,6 +43,13 @@ Free input, sorted, concatenated values
   <li><button class="expand" title="Add another input">➕</button><l/i>
 </ul>
 
+User-draggable values
+<ul class="answer">
+  <li draggable="true"><input value="First" readonly></li>
+  <li draggable="true"><input value="Third" readonly></li>
+  <li draggable="true"><input value="Second" readonly></li>
+</ul>
+
 Select from an ordered list of options
 <ul class="answer">
   <li><input type="checkbox" value="horn">Horns</li>

src/instance.go

@@ -24,6 +24,7 @@ type Instance struct {
 
 	categories       map[string]*Mothball
 	update           chan bool
+	puzzleList       map[string]int{}
 	jPuzzleList      []byte
 	jPointsLog       []byte
 	nextAttempt      map[string]time.Time

theme/basic.css

@@ -116,3 +116,20 @@ input:invalid {
     transform: rotate(360deg);
   }
 }
+
+li[draggable]::before {
+  content: "↕";
+  padding: 0.5em;
+  cursor: move;
+}
+li[draggable] {
+  list-style: none;
+}
+
+[draggable].moving {
+  opacity: 0.4;
+}
+
+[draggable].over {
+  border: 1px white dashed;
+}