From 7360d5715098720eb0e490a70551423f098c5c11 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sun, 14 Feb 2021 22:53:20 +0000
Subject: [PATCH] .

---
 anatomy/static/css/anatomy.css             |  5 +++++
 longs/templates/longs/longseries_form.html | 22 ++++++++++++++++++++--
 templates/base.html                        |  1 +
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/anatomy/static/css/anatomy.css b/anatomy/static/css/anatomy.css
index 5caa8433..6fc7be38 100644
--- a/anatomy/static/css/anatomy.css
+++ b/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;
+
  }
\ No newline at end of file
diff --git a/longs/templates/longs/longseries_form.html b/longs/templates/longs/longseries_form.html
index c7ca9934..7d1a23f3 100755
--- a/longs/templates/longs/longseries_form.html
+++ b/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}}
diff --git a/templates/base.html b/templates/base.html
index c26bb4e6..8aa430c7 100644
--- a/templates/base.html
+++ b/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>