added empty divs for dnd

app/templates/book/collection_view.html

@@ -40,7 +40,12 @@
     </div>
     <!-- prettier-ignore -->
     {% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
-    <div >
+    <div
+      {% if not collection.active_children and not collection.active_sections %}id="empty-dnd-entity"
+      {% elif collection.active_children %}data-dnd="dnd-sub-collection"
+      {% elif collection.active_sections %}id="draggableSectionItems"{% endif %}
+      data-entity-type="collection"
+      data-entity-id="{{collection.id}}">
       <div  class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
         <button class="bg-inherit" type="button" data-accordion-target="#accordion-collapse-body-{{collection.id}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{collection.id}}">
         <!-- prettier-ignore -->

app/templates/book/components/collection_context_menu.html

@@ -29,9 +29,9 @@
     </button>
   </li>
   <!-- prettier-ignore -->
-  {% endif %} 
-  {% endif %} 
-  {% if access_to_create_section %} 
+  {% endif %}
+  {% endif %}
+  {% if access_to_create_section %}
   {% if collection.active_children|length ==0 or collection.active_children|length ==0 and collection.is_leaf %}
   <li>
     <button

app/templates/book/components/section_tab_content.html

@@ -1,4 +1,7 @@
-<div class="flex flex-col ml-6">
+<div
+  class="flex flex-col ml-6"
+  data-entity-id="{{section.id}}"
+  data-entity-type="section">
   <!-- prettier-ignore -->
   <button type="button" href="#section-{{section.label}}" id="section-heading-{{section.id}}" class="text-gray-500 dark:text-gray-400 w-max">
     <!-- prettier-ignore -->

app/templates/book/components/sub_collection_tab_content.html

@@ -1,10 +1,26 @@
-<div class="ml-6" data-dnd="dnd-sub-collection">
+<!-- prettier-ignore -->
+<div
+  class="ml-6"
+  data-dnd="dnd-sub-collection"
+  {% if collection %}
+  data-entity-type="collection"
+  data-entity-id="{{collection.id}}"
+  {% endif %}
+  {% if sub_collection %}
+  data-entity-type="sub_collection"
+  data-entity-id="{{sub_collection.id}}"
+  {% endif %}
+  >
   {% if not collection.is_leaf %}
   <!-- if collection has sub_collection make for loop for it -->
   <!-- Nested accordion -->
   <!-- prettier-ignore -->
   {% for sub_collection in collection.children if not sub_collection.is_deleted%}
-  <div id="accordion-nested-collapse" data-accordion="open">
+  <div
+    id="accordion-nested-collapse"
+    data-accordion="open"
+    data-entity-id="{{sub_collection.id}}"
+    data-entity-type="sub_collection">
     <!-- prettier-ignore -->
     <div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
       <button
@@ -37,7 +53,7 @@
     {% if sub_collection.active_children %}
         {{recursive_render("book/components/sub_collection_tab_content.html",sub_collection,book)|safe}}
     {% elif sub_collection.active_sections  %}
-        <div id="draggableSectionItems" data-sub-collection-id="{{sub_collection.id}}">
+        <div id="draggableSectionItems" data-entity-id="{{sub_collection.id}}" data-entity-type="sub_collection">
         <!-- here comes for loop for all section in this sub_collection-->
             {% for section in sub_collection.active_sections %}
                 {% include 'book/components/section_tab_content.html' %}
@@ -53,7 +69,8 @@
   <div
     class="ml-6"
     id="draggableSectionItems"
-    data-collection-id="{{collection.id}}">
+    data-entity-id="{{collection.id}}"
+    data-entity-type="collection">
     <!-- here comes for loop for all section in this collection-->
     {% for section in collection.active_sections %}
     <!-- prettier-ignore -->

src/drag_and_drop.ts

@@ -6,6 +6,7 @@ export function initDnD() {
     document.querySelectorAll('#draggableSectionItems');
   const divsForSubCollectionsDnD: NodeListOf<HTMLDivElement> =
     document.querySelectorAll('[data-dnd="dnd-sub-collection"]');
+  const divsAreEmpty = document.querySelectorAll('#empty-dnd-entity');
   divsForSubCollectionsDnD.forEach((div: HTMLDivElement) =>
     Sortable.create(div, {
       group: {
@@ -16,16 +17,24 @@ export function initDnD() {
       animation: 100,
       onEnd: function (/**Event*/ evt) {
         var itemEl = evt.item; // dragged HTMLElement
-        console.log('we moved sub_collection', itemEl);
-
-        evt.to; // target list
-        console.log('evt.from', evt.from.getAttribute('data-collection-id'));
         console.log(
-          'evt.from',
-          evt.from.getAttribute('data-sub-collection-id'),
+          'we moved',
+          itemEl.getAttribute('data-entity-type'),
+          itemEl.getAttribute('data-entity-id'),
+        );
+        evt.to; // target list
+        evt.from; // previous list
+        console.log(
+          'from',
+          evt.from.getAttribute('data-entity-type'),
+          evt.from.getAttribute('data-entity-id'),
+        );
+        console.log(
+          'to',
+          evt.to.getAttribute('data-entity-type'),
+          evt.to.getAttribute('data-entity-id'),
         );
 
-        evt.from; // previous list
         console.log('evt.oldIndex', evt.oldIndex);
         evt.oldIndex; // element's old index within old parent
         console.log('evt.newIndex', evt.newIndex);
@@ -49,16 +58,106 @@ export function initDnD() {
       animation: 100,
       onEnd: function (/**Event*/ evt) {
         var itemEl = evt.item; // dragged HTMLElement
-        console.log('evt.to', evt.to.getAttribute('data-collection-id'));
-        console.log('evt.to', evt.to.getAttribute('data-sub-collection-id'));
-        evt.to; // target list
-        console.log('evt.from', evt.from.getAttribute('data-collection-id'));
         console.log(
-          'evt.from',
-          evt.from.getAttribute('data-sub-collection-id'),
+          'we moved',
+          itemEl.getAttribute('data-entity-type'),
+          itemEl.getAttribute('data-entity-id'),
+        );
+        evt.to; // target list
+        evt.from; // previous list
+        console.log(
+          'from',
+          evt.from.getAttribute('data-entity-type'),
+          evt.from.getAttribute('data-entity-id'),
+        );
+        console.log(
+          'to',
+          evt.to.getAttribute('data-entity-type'),
+          evt.to.getAttribute('data-entity-id'),
         );
 
+        console.log('evt.oldIndex', evt.oldIndex);
+        evt.oldIndex; // element's old index within old parent
+        console.log('evt.newIndex', evt.newIndex);
+        evt.newIndex; // element's new index within new parent
+        console.log('evt.oldDraggableIndex', evt.oldDraggableIndex);
+        evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
+        console.log('evt.newDraggableIndex', evt.newDraggableIndex);
+        evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
+        evt.clone; // the clone element
+        evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
+      },
+    }),
+  );
+  divsForSubCollectionsDnD.forEach((div: HTMLDivElement) =>
+    Sortable.create(div, {
+      group: {
+        name: 'sub_collections',
+        pull: true,
+        put: ['sub_collections'],
+      },
+      animation: 100,
+      onEnd: function (/**Event*/ evt) {
+        var itemEl = evt.item; // dragged HTMLElement
+        console.log(
+          'we moved',
+          itemEl.getAttribute('data-entity-type'),
+          itemEl.getAttribute('data-entity-id'),
+        );
+        evt.to; // target list
         evt.from; // previous list
+        console.log(
+          'from',
+          evt.from.getAttribute('data-entity-type'),
+          evt.from.getAttribute('data-entity-id'),
+        );
+        console.log(
+          'to',
+          evt.to.getAttribute('data-entity-type'),
+          evt.to.getAttribute('data-entity-id'),
+        );
+
+        console.log('evt.oldIndex', evt.oldIndex);
+        evt.oldIndex; // element's old index within old parent
+        console.log('evt.newIndex', evt.newIndex);
+        evt.newIndex; // element's new index within new parent
+        console.log('evt.oldDraggableIndex', evt.oldDraggableIndex);
+        evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
+        console.log('evt.newDraggableIndex', evt.newDraggableIndex);
+        evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
+        evt.clone; // the clone element
+        evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
+      },
+    }),
+  );
+  divsAreEmpty.forEach((div: HTMLDivElement) =>
+    Sortable.create(div, {
+      group: {
+        name: 'empty',
+        pull: false,
+        put: ['sections', 'sub_collections'],
+      },
+      animation: 100,
+      onEnd: function (/**Event*/ evt) {
+        var itemEl = evt.item; // dragged HTMLElement
+        console.log(
+          'we moved',
+          itemEl.getAttribute('data-entity-type'),
+          itemEl.getAttribute('data-entity-id'),
+        );
+        evt.to; // target list
+        evt.from; // previous list
+        console.log(
+          'from',
+          evt.from.getAttribute('data-entity-type'),
+          evt.from.getAttribute('data-entity-id'),
+        );
+        console.log(
+          'to',
+          evt.to.getAttribute('data-entity-type'),
+          evt.to.getAttribute('data-entity-id'),
+        );
+
         console.log('evt.oldIndex', evt.oldIndex);
         evt.oldIndex; // element's old index within old parent
         console.log('evt.newIndex', evt.newIndex);