new sortable list implementation

app/templates/mod/sort-topics.html

@@ -1,18 +1,20 @@
 {% extends "base.html" %}
+{% from 'common/macros.html' import sortable_list, sortable_list_item %}
 {% block content %}
 <div class="darkbg">
   <h1>Change topics order</h1>
-  <p>Drag topic titles to reoder them. Press submit when done. The topics will appear to users in the order set here.</p>
-  <form method="post" id=topics-container>
+  <p>Drag topic titles to reoder them. Press "Save order" when done. The topics will appear to users in the order set here.</p>
+  <form method="post">
+    <input type=submit value="Save order">
+    {% call() sortable_list() %}
       {% for topic in topics %}
-        <div draggable="true" class="draggable-topic" ondragover="dragOver(event)" ondragstart="dragStart(event)" ondragend="dragEnd()">
-          <div class="thread-title">{{ topic['name'] }}</div>
+        {% call() sortable_list_item(key="topics") %}
+          <div class="thread-title">{{ topic.name }}</div>
           <div>{{ topic.description }}</div>
-          <input type="hidden" name="{{ topic['id'] }}" value="{{ topic['sort-order'] }}" class="topic-input">
-        </div>
+          <input type="hidden" name="topics[]" value="{{ topic.id }}" class="topic-input">
+        {% endcall %}
       {% endfor %}
-      <input type=submit value="Save order">
-    </form>
+    {% endcall %}
+  </form>
 </div>
-<script src="{{ "/static/js/sort-topics.js" | cachebust }}"></script>
 {% endblock %}