Prototype of album drag-and-drop moving.

I'm not entirely happy with the way that native drag-and-drop looks,
the transparent bit that you hold while dragging looks dumb.
Will have to look into control / shift clicking to multiselect.
Also just using browser confirm() for now since I haven't made my
own dialog for that kind of thing yet.

README.md

@@ -122,7 +122,6 @@ Here is a brief overview of the project to help you learn your way around:
 - A "card" representation of albums, like photos.
 - Similarly, rename all "tag_object" to tag card and unify that experience a bit.
 - Batch movement of Albums... but without winding up with a second clipboard system?
-- Drag-and-drop of cards on album pages for easier moving.
 - Overall, more dynamism with cards and tag objects and updating page without requiring refresh.
 - Absolute consistency of CSS classes for divs that hold photo cards.
 

frontends/etiquette_flask/templates/album.html

@@ -113,7 +113,7 @@ h2, h3
         <div id="album_list" class="panel">
             <h2>Albums</h2>
             {% for album in albums %}
-            {{album_card.create_album_card(album, view=view)}}
+            {{album_card.create_album_card(album, view=view, draggable=true)}}
             {% endfor %}
         </div>
     </div>
@@ -264,7 +264,7 @@ ALBUM_ID = undefined;
         <div id="hierarchy_children" class="panel">
             <h3>{{sub_albums|length}} Children</h3>
             {% for sub_album in sub_albums|sort(attribute='title') %}
-                {{album_card.create_album_card(sub_album, view=view, unlink_parent=album)}}
+                {{album_card.create_album_card(sub_album, view=view, unlink_parent=album, draggable=true)}}
             {% endfor %}
         </div>
         {% endif %}
@@ -392,5 +392,46 @@ function create_child(title)
     var parent_id = ALBUM_ID;
     api.albums.create(title, parent_id, api.albums.callback_follow);
 }
+
+function on_album_drag_start(event)
+{
+    event.dataTransfer.setData("text/plain", event.target.id);
+}
+function on_album_drag_end(event)
+{
+}
+function on_album_drag_over(event)
+{
+    event.preventDefault();
+}
+function on_album_drag_drop(event)
+{
+    var child_id = event.dataTransfer.getData("text");
+    var child = document.getElementById(child_id);
+    child_id = child.dataset.id;
+    var parent = event.currentTarget;
+    var parent_id = parent.dataset.id;
+    event.dataTransfer.clearData();
+
+    if (child_id == parent_id)
+    {
+        return;
+    }
+
+    var child_title = child.querySelector('.album_card_title').textContent.trim();
+    var parent_title = parent.querySelector('.album_card_title').textContent.trim();
+    if (confirm(`Move\n${child_title}\ninto\n${parent_title}?`))
+    {
+        if (ALBUM_ID)
+        {
+            api.albums.add_child(parent_id, child_id, null);
+            api.albums.remove_child(ALBUM_ID, child_id, common.refresh);
+        }
+        else
+        {
+            api.albums.add_child(parent_id, child_id, common.refresh);
+        }
+    }
+}
 </script>
 </html>

frontends/etiquette_flask/templates/album_card.html

@@ -1,7 +1,19 @@
-{% macro create_album_card(album, view="grid", unlink_parent=none) %}
+{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %}
+{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %}
 {% set view = (view if view in ("list", "grid") else "grid") %}
 {% set viewparam = "?view=list" if view == "list" else "" %}
-<div class="album_card album_card_{{view}}" data-id="{{album.id}}">
+<div
+id="{{id}}"
+class="album_card album_card_{{view}}"
+data-id="{{album.id}}"
+ondragstart="on_album_drag_start(event)"
+ondragend="on_album_drag_end(event)"
+ondragover="on_album_drag_over(event)"
+ondrop="on_album_drag_drop(event)"
+{% if album != "root" and draggable %}
+draggable=true
+{% endif %}
+>
     {% if album == "root" %}
     <a class="album_card_thumbnail" href="/albums{{viewparam}}">
     {% else %}