diff --git a/README.md b/README.md
index 197c855..9c237a2 100644
--- a/README.md
+++ b/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.
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index 2f0a938..6397c55 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -113,7 +113,7 @@ h2, h3
Albums
{% for album in albums %}
- {{album_card.create_album_card(album, view=view)}}
+ {{album_card.create_album_card(album, view=view, draggable=true)}}
{% endfor %}
@@ -264,7 +264,7 @@ ALBUM_ID = undefined;
{{sub_albums|length}} Children
{% 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 %}
{% 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);
+ }
+ }
+}