.

anatomy/static/css/anatomy.css

@@ -449,4 +449,9 @@ td.user-answer-score-2::after {
 
 .multi-image-block, .series-block {
    display: inline-flex;
+ }
+
+ .sortable-placeholder {
+  border: 4px solid purple;
+
  }

longs/templates/longs/longseries_form.html

@@ -130,6 +130,21 @@
 
 
 
+        sortable('.sortable');
+        sortable('.sortable')[0].addEventListener('sortstop', function(e) {
+            /*
+
+            This event is triggered when the user stops sorting and the DOM position has not yet changed.
+
+            e.detail.item - {HTMLElement} dragged element
+
+            Origin Container Data
+            e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
+            e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
+            e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
+            */
+           updateImagePositions();
+        });
     });
 
 
@@ -257,6 +272,7 @@
     }
 
     function updateImagePositions() {
+        console.log("UP pos");
 
         file_set = $("#image_form_set ul");
 
@@ -267,7 +283,9 @@
 
             file_element = $(ul).find("input[type=file]").get(0);
             console.log(file_element);
-            if (file_element.files.length > 0) {
+
+            ""
+            if (file_element.files.length > 0 || $(ul).find(":contains('Currently:')")) {
                 n++;
                 $(ul).find("input[type=number]").val(n);
             }
@@ -296,7 +314,7 @@ This form will create a image set that can be associated with a long question. I
         <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
         <div id="drop-filenames"></div>
     </div>
-    <div id="image_form_set">
+    <div id="image_form_set" class="sortable">
         {% for form in image_formset %}
         <ul class="no-error image-formset">
             {{form.non_field_errors}}

templates/base.html

@@ -22,6 +22,7 @@
     <script src="{% static 'tagulous/lib/select2-3/select2.min.js' %}"></script>
     <script src="{% static 'tagulous/tagulous.js' %}"></script>
     <script src="{% static 'tagulous/adaptor/select2-3.js' %}"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.10.0/html5sortable.min.js" integrity="sha512-tBlVMq89XaEC9iU5LyRjP2Vxs8SmVhEHGbv2Co6SbGa14Wsxy2qZN0jadrN+Xn5AifORaUbvZcG21/ExcNfWDA==" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.3/dexie.min.js" integrity="sha512-aEtNzq8X5E0ambgeM68H174SOXaANJ6wDqJ0TuVIx4R2J4fRdUA0nLzx0faA1mmViqb+r0VX7cOXkskxyJENUA==" crossorigin="anonymous"></script>
     <script src="{% static 'js/toastr.min.js' %}"></script>