Merge branch 'release/2.3'

Author: Hesam Bahrami (Genzo)

dev/css/main.css

@@ -2,33 +2,28 @@ body {
   font-family: 'Roboto', sans-serif;
 }
 
-.nested-sort,
-#draggable {
+.nested-sort {
   padding: 0;
 }
 
-.nested-sort li,
-#draggable li {
+.nested-sort li {
   list-style: none;
   margin: 0 0 5px;
   padding: 10px;
   background-color: #eee;
   border: 1px solid #ccc;
 }
 
-.nested-sort li ul,
-#draggable li ul {
+.nested-sort li ul {
   padding: 0;
   margin-top: 10px;
   margin-bottom: -5px;
 }
 
-.nested-sort .ns-dragged,
-#draggable .ns-dragged {
+.nested-sort .ns-dragged {
   outline: 2px solid red;
 }
 
-.nested-sort .ns-targeted,
-#draggable .ns-targeted {
+.nested-sort .ns-targeted {
   outline: 2px solid green;
 }

dev/server-rendered-list.html

@@ -44,7 +44,8 @@ <h1>A server-rendered lists</h1>
         }
       },
       el: 'draggable',
-      droppingEdge: 5
+      droppingEdge: 5,
+      listClassNames: ['nested-sort']
     });
   })();
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nested-sort",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": "Hesam Bahrami (Genzo)",
   "description": "A JavaScript library to create a nested list of elements",
   "main": "dist/nested-sort.cjs.js",

src/main.js

@@ -63,6 +63,7 @@ class nestedSort {
     }
 
     this.maybeInitDataDom()
+    this.addListAttributes()
     this.initDragAndDrop();
   }
 
@@ -83,20 +84,26 @@ class nestedSort {
     if (!(Array.isArray(this.data) && this.data.length)) return;
 
     const list = this.getDataEngine().render()
-    list.classList.add(...this.listClassNames)
     document.getElementById(this.selector).appendChild(list);
   }
 
-  initDragAndDrop() {
+  getSortableList() {
+    if (this.sortableList instanceof HTMLUListElement) return this.sortableList
+    const list = document.getElementById(this.selector)
+    this.sortableList = list.nodeName === 'UL' ? list : list.querySelector('ul')
+    return this.sortableList
+  }
+
+  addListAttributes() {
+    this.getSortableList().classList.add(...this.listClassNames)
+  }
 
+  initDragAndDrop() {
     document.addEventListener('dragover', this.dragListener.bind(this), false);
 
     this.initPlaceholderList();
 
-    const list = document.getElementById(this.selector)
-    this.sortableList = list.nodeName === 'UL' ? list : list.querySelector('ul')
-
-    this.sortableList.querySelectorAll('li').forEach(el => {
+    this.getSortableList().querySelectorAll('li').forEach(el => {
       el.setAttribute('draggable', 'true');
 
       el.addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -164,7 +171,7 @@ class nestedSort {
     this.cleanupPlaceholderLists();
 
     if (typeof this.actions.onDrop === 'function') {
-      this.actions.onDrop(this.getDataEngine().convertDomToData(this.sortableList))
+      this.actions.onDrop(this.getDataEngine().convertDomToData(this.getSortableList()))
     }
   }
 
@@ -317,7 +324,7 @@ class nestedSort {
   }
 
   cleanupPlaceholderLists() {
-    this.sortableList.querySelectorAll('ul').forEach(ul => {
+    this.getSortableList().querySelectorAll('ul').forEach(ul => {
       if (!ul.querySelectorAll('li').length) {
         ul.remove();
       } else if (ul.classList.contains(this.classNames.placeholder)) {