From a580c841f6c989ffdb0e6a9872213a99ed0abf96 Mon Sep 17 00:00:00 2001
From: aadhavan valli <aadhavanvalli@gmail.com>
Date: Fri, 12 Jan 2024 11:15:53 +0530
Subject: [PATCH] DRAGANDDROP : AADHAVAN

---
 QuestionPaperPreview.js                    |  10 +-
 QuestionPreview.html                       |  37 ++-
 addform.html                               |  54 +++-
 assets/js/custom-js-css/drag-drop-css.js   |   4 +
 assets/js/custom-js-css/drag-drop.js       | 271 +++++++++++++++++++++
 assets/js/custom-js-css/nav_pane_hover.css |  72 ++++++
 assets/js/takeNumberOnly/takeNumberOnly.js |  10 +
 nav_pane.js                                |  90 +++++--
 style.css                                  |   1 +
 9 files changed, 518 insertions(+), 31 deletions(-)
 create mode 100644 assets/js/custom-js-css/drag-drop-css.js
 create mode 100644 assets/js/custom-js-css/drag-drop.js
 create mode 100644 assets/js/custom-js-css/nav_pane_hover.css
 create mode 100644 assets/js/takeNumberOnly/takeNumberOnly.js

diff --git a/QuestionPaperPreview.js b/QuestionPaperPreview.js
index 1153849..f2ac23f 100644
--- a/QuestionPaperPreview.js
+++ b/QuestionPaperPreview.js
@@ -71,6 +71,7 @@ function QuestionPaperPreview(jsonData){
         const questionPaperTitle = data.question_paper_title;
         const questionPaperDescription = data.question_paper_description;
     
+        console.log(data);
            var title = removeHtmlTags(questionPaperTitle)
     
         // Wrap the heading elements in <div> elements with CSS for centering
@@ -231,12 +232,12 @@ function QuestionPaperPreview(jsonData){
                     //     questionGroupMark = questionGroupMark.replace('<p id="group_marks">', '<p id="group_marks" hidden>')
                     // }
                     
-                    questionPaper += `<div class="text-group-align" style="margin-left:0px;">${questionId})${questionGroupmodify}</div>`
+                    questionPaper += `<div class="textGroup"><div class="text-group-align" style="margin-left:0px;">${questionId})${questionGroupmodify}</div>`
 
                     questionPaper += `<div class="group_marks_attmpt">${questionGroupAttempt}${questionGroupMark}</div>`;
                     // questionPaper += `<div class="group_attempt_any">${questionGroupAttempt}</div>`;
                    
-                    questionPaper += `<div class="group-descrip" style="margin-left:${description_align}px">${questionGroupDescription}</div>`;
+                    questionPaper += `<div class="group-descrip" style="margin-left:${description_align}px">${questionGroupDescription}</div></div>`;
                     depth2++
                 } else if (question.question) {
 
@@ -328,6 +329,7 @@ function QuestionPaperPreview(jsonData){
                     
                         const alphabetOptions = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Define the alphabet options
                         for (let i = 0; i < answers.length; i++) { // change the i +=2 aadhavan
+                            // console.log(answers);
                             const optionA = alphabetOptions[i];
                             // const optionB = alphabetOptions[i + 1]; 
 
@@ -337,9 +339,9 @@ function QuestionPaperPreview(jsonData){
                             const answerA = answers[i] ? `${optionA}. ${convertToLatex(answers[i].choice_name, math)}` : '';
                             // const answerB = answers[i + 1] ? `${optionB}. ${convertToLatex(answers[i + 1].choice_name, mathstatus)}` : '';
                             if (multipleAnswer == 'false') {
-                                questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input type="radio" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
+                                questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input class="optionSelectArea" type="radio" name="answer" value="A"> <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
                             }else{
-                                questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input type="checkbox" name="answer" value="A">  <p class="ChoiceOption">  ${answerA.padEnd(10)}</p></div>`;
+                                questionPaper += `<div class="text-option-align" style="margin-left:${choisealgin}px"><input class="optionSelectArea" type="checkbox" name="answer" value="A">  <p class="ChoiceOption">${answerA.padEnd(10)}</p></div>`;
                             }
                         }
                     }
diff --git a/QuestionPreview.html b/QuestionPreview.html
index dd12c6b..5880bcc 100644
--- a/QuestionPreview.html
+++ b/QuestionPreview.html
@@ -53,8 +53,25 @@
 
 	
     <style>
+		/* .ChoiceOption{
+			position: absolute;
+			margin-top: 28px !important;
+			margin-left: -25px !important;
+		} */
+
+		.optionSelectArea{
+			position: absolute;
+    		margin-top: 36px;
+		}
+		input[type=checkbox], input[type=radio] {
+    	margin-left: -32px;
+	}
+		img{
+			margin-top: 20px;
+		}
+
 		.question_Text img{
-			margin-top: 25px;
+			margin-top: 30px;
 		}
 
 
@@ -67,8 +84,13 @@
 			display: flex;
 		}
 		.ChoiceOption{
-			display: flex;
+			/* display: flex; */
     		align-items: center;
+			display: inline;
+    		/* margin-left: -6px !important; */
+			position: absolute;
+			margin-top: 28px !important;
+			margin-left: -25px !important;
 		}
 		.ql-align-right.table-border{
 			width: 167px !important;
@@ -253,10 +275,10 @@
         .MathJax.CtxtMenu_Attached_0{
             display: contents !important;
         }
-        .text-qus-align{padding-right: 62px; }
+        .text-qus-align{padding-right: 62px; margin-top: 37px; inline-size: 790px;}
         .text-qus-align p{ margin:0; }
-        .text-des{ margin-left: 20px;margin-top: 0px;}	/* Change there aadhavan top-6px*/ 
-        .text-option-align{display:flex;margin-top: 0%;margin-left: 45px;} /* Change there aadhavan 10px*/  
+        .text-des{ margin-left: 20px;margin-top: 10px; inline-size: 790px;}	/* Change there aadhavan top-6px*/ 
+        .text-option-align{display:flow-root;margin-top: -2%;margin-left: 45px; inline-size: 790px; } /* Change there aadhavan 10px*/  
         .text-option-align p{ margin:0; text-wrap: balance;}
 		/* #sectionTitle {border-top: 2px solid gray
 		; width:99%;} */
@@ -317,8 +339,9 @@
 		}
 		.group-descrip{
 			position: relative;
-			top: -21px;
-    margin-bottom: -20px;
+			top: 15px;
+   			margin-bottom: -20px;
+			inline-size: 790px;
 		}
 		/* p.question_Text:not(:first-of-type) {
 			margin-left: 34px;
diff --git a/addform.html b/addform.html
index e59dc49..7de264f 100644
--- a/addform.html
+++ b/addform.html
@@ -59,6 +59,15 @@
 		
 		<script src="./node_modules/jodit/es2018/jodit.min.js"></script>
 	
+		<script src="./assets/js/custom-js-css/drag-drop.js"></script>
+		<link rel="stylesheet" href="./assets/js/custom-js-css/nav_pane_hover.css" />
+
+
+
+			<style>
+				
+			</style>
+
 	
 		<style>
 
@@ -421,7 +430,7 @@
 		overflow-x: clip;
 		max-height: 532px;
 		padding:0 10px 20px; 
-		width: 285px;
+		width: 314px;
 		height: -webkit-fill-available;
 		}
 	
@@ -5067,7 +5076,7 @@ function removeNonExistentIds(arrayOfIds) {
 </script>
 
 
-<script>
+<!-- <script>
 let draggedItemGroup = null;
 let draggedItemQuestion = null;
 let dropTarget = null;
@@ -5199,7 +5208,7 @@ console.error('No dragged item or drop target found.');
 
 
 
-</script> 
+</script>  -->
 
 <script>
 // Store a reference to the currently displayed div
@@ -5730,5 +5739,44 @@ setInterval(removeNonExistentIdseveryTime, 1000)
 </script>
 
 
+
+
+
+
+
+
+<script>
+
+	function removeNavContain() {
+		var classnames = document.querySelectorAll('.navContain')
+		classnames.forEach(function (classname) {
+			if (!classname.innerHTML) {
+				classname.remove();
+			}else{
+				var checkITag =classname.querySelector('i')
+
+				if (checkITag) {
+					
+				} else {
+					const gripIcon = document.createElement('i');
+				gripIcon.className = 'fas fa-grip-horizontal';
+				gripIcon.style.position = 'fixed'; 
+				gripIcon.style.right = '1260px';
+				// gripIcon.setAttribute('draggable', 'true');
+
+				classname.appendChild(gripIcon);
+				
+				}
+
+				
+			}
+		})
+	}
+
+	setInterval(removeNavContain, 300)
+</script>
+
+
+
 </body>
 </html>
diff --git a/assets/js/custom-js-css/drag-drop-css.js b/assets/js/custom-js-css/drag-drop-css.js
new file mode 100644
index 0000000..ed11241
--- /dev/null
+++ b/assets/js/custom-js-css/drag-drop-css.js
@@ -0,0 +1,4 @@
+
+
+
+var a =document.
\ No newline at end of file
diff --git a/assets/js/custom-js-css/drag-drop.js b/assets/js/custom-js-css/drag-drop.js
new file mode 100644
index 0000000..52f70e7
--- /dev/null
+++ b/assets/js/custom-js-css/drag-drop.js
@@ -0,0 +1,271 @@
+
+var dragStartElement= null;
+var dragDropElement=null;
+var draggedItem = null;
+
+	//DragStart Function 
+	function dragStart(a,e){
+		// console.log("Start->",a.id);
+		dragStartElement = a;
+		a.classList.add('draggedElementStart');
+		// draggedItem = this;
+        // e.dataTransfer.effectAllowed = 'move';
+        // e.dataTransfer.setData('text/html', this.innerHTML);
+	}
+
+	//DragOver Function
+	function dragOver(element , event) {
+		var sectionArea = element.parentNode.previousElementSibling
+		if (sectionArea.id.replace(/\d/g, '') == "nav_section_title_" || element.id.replace(/\d+/g, '') == "nav_section_title_") {
+			element.style.border = '2px solid rgba(255, 0, 0, 0.5)';
+		}else {
+			element.style.border = '2px solid rgba(128, 128, 128, 0.5)';
+		}
+
+		// console.log("Over -> ",element.id);
+
+		// element.classList.add("dragOverElement")
+
+		// if (element.id.replace(/\d/g, '') == "nav_removeAndCloneTextQuestion_" || element.id.replace(/\d/g, '') == 'nav_removeAndCloneQroupQuestion_') {
+		// 	element.style.border = '2px solid rgba(169, 169, 0, 0.5)';
+		// } else if(element.id.replace(/\d/g, '') == "nav_draggedGroup_"){
+		// 	element.style.border = '2px solid rgba(128, 128, 128, 0.5)';
+		// }else{
+		// 	element.style.border = '2px solid rgba(255, 0, 0, 0.5)';
+		// }
+	
+		// console.log(element);
+		element.style.borderRadius = '5px';
+		dragDropElement = element;
+	
+		if (event.preventDefault) {
+			event.preventDefault();
+		}
+		event.dataTransfer.dropEffect = 'move';
+		return false;
+	}
+
+
+	function dragLeave(element, event) {
+		element.style.border = 'none';
+		// element.classList.remove('dragOverElement');
+	}
+
+
+
+	//DragEnd Function
+	function dragEnd(element, e) {
+		// console.log("DragEnd -> ",element.id);
+		element.classList.remove('draggedElementStart');
+		// element.classList.remove('dragOverElement');
+
+	}
+
+
+	//DragDrop
+	async function  dragDrop(element,e) {
+		element.style.border = 'none';
+		// element.classList.remove('dragOverElement');
+		// console.log("DragDrop -> ", element.id);
+		if (e.stopPropagation) {
+			e.stopPropagation();
+		}
+		//Nav Pane full Element 
+		const container = document.getElementById('questionPaper');
+		const dropTarget = e.target;
+		if (container.contains(dropTarget)) {
+			//Before Insert OF the HTML Node
+			if (e.clientY < dropTarget.getBoundingClientRect().top + dropTarget.clientHeight / 2) {
+				console.log("BEFORE INSERTS....");
+				//Check Start And Drop Element true And Two Not equal to
+				if (dragStartElement && dragDropElement && dragStartElement !== dragDropElement) {	
+					// var list = document.getElementById(dragDropElement.id);
+					//Check Drop Element is Group Question 
+					if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
+						//Check First Element is Group Question 
+						if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
+							var dragStartElementChild = dragStartElement.nextElementSibling;
+							// var addbefore = dragStartElement.previousElementSibling;
+							dragDropElement.parentNode.insertBefore(dragStartElement,dragDropElement);
+							// dragStartElement.parentNode.insertBefore(addbefore , dragStartElement)				 
+							dragDropElement.parentNode.insertBefore(dragStartElementChild , dragDropElement);
+							insertElement(dragStartElement, dragDropElement,"before")
+						} else {
+							dragDropElement.parentNode.insertBefore(dragStartElement,dragDropElement)
+							insertElement(dragStartElement, dragDropElement,"before")
+						}
+					}else if (dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_") {
+						
+					}
+					else {
+						dragDropElement.parentNode.insertBefore( dragStartElement, dragDropElement);
+						insertElement(dragStartElement,dragDropElement,"before");	
+					}			
+				}
+			} 
+			//After Insert of the HTML Node
+			else {
+				console.log("AFTER INSERT .....");
+				//Check Start And Drop Element true And Two Not equal to
+				if (dragStartElement && dragDropElement && dragStartElement !== dragDropElement) {	
+					// var list = document.getElementById(dragDropElement.id);
+					//Check Drop Element is Group Question
+					if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
+						if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
+							var dragDropElementChild = dragDropElement.nextElementSibling.dragStartElementChild;
+							var dragStartElementChild = dragStartElement.nextElementSibling;
+							if (dragDropElementChild) {
+								dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild)
+								dragDropElementChild.parentNode.insertBefore(dragStartElementChild, dragDropElementChild)
+								insertElement(dragStartElement,dragDropElement,"after")
+							} else {
+								dragDropElementChild = dragDropElement.nextElementSibling;
+								dragDropElementChild.appendChild(dragStartElement)
+								dragDropElementChild.appendChild(dragStartElementChild)
+								insertElement(dragStartElement, dragDropElement,"after")
+								// console.log(dragDropElementChild);
+							}
+						} else {
+							var dragDropElementNextElement=dragDropElement.nextElementSibling.firstChild;
+							if (dragDropElementNextElement) {
+								dragDropElementNextElement.parentNode.insertBefore(dragStartElement, dragDropElementNextElement)
+								insertElement(dragStartElement ,dragDropElement,"after")
+							} else {
+								dragDropElementNextElement = dragDropElement.nextElementSibling;
+								dragDropElementNextElement.appendChild(dragStartElement);
+								insertElement(dragStartElement , dragDropElement)
+							}
+						}				
+					}
+					//Check Drop Element is Section 
+					else if(dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_"){
+						var dragDropElementChild = dragDropElement.nextElementSibling.firstChild;
+						
+
+						if (dragDropElementChild) {
+								dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild);
+								insertElement(dragStartElement, dragDropElement);
+						} else {
+
+							if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
+								var firstChild = dragStartElement.nextElementSibling;
+								dragDropElementChild = dragDropElement.nextElementSibling;
+
+								dragDropElementChild.appendChild(dragStartElement);
+								dragDropElementChild.appendChild(firstChild)
+
+							} else {
+							dragDropElementChild = dragDropElement.nextElementSibling;
+							dragDropElementChild.appendChild(dragStartElement);
+							insertElement(dragStartElement, dragDropElement);
+							}
+
+							
+							
+						}
+							
+					}
+					//THis Entered in Text and Choice Question 
+					else {
+						//Check the Start Element is Group Question 
+						if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
+							var parent = dragDropElement.parentNode;
+							var lastChild = parent.lastChild;
+							var dragStartElementChild = dragStartElement.nextElementSibling;
+							parent.insertBefore(dragStartElement, lastChild.nextElementSibling)
+							parent.insertBefore(dragStartElementChild , dragStartElement.nextElementSibling)
+							insertElement(dragStartElement , dragDropElement , "after")
+						}
+						// this Entered Text and Choice Question 
+						else {
+							dragDropElement.parentNode.insertBefore( dragStartElement, dragDropElement.nextElementSibling);
+							insertElement(dragStartElement,dragDropElement,"after");
+							// dragStartElement = null;
+							// dragDropElement = null;	
+						}					
+					}			
+				}
+			}
+		}
+	}
+
+
+	//THis function is Replicate the Nav Pane Change
+	function insertElement(dragStartElement, dragDropElement, position){
+		var mainpaneSection = document.getElementById('addNewSection')
+		//Check All is true this for 
+		if (dragStartElement && dragDropElement && position) {
+			//Check IS before 
+			if (position == "before") {
+				//Check DragFirst Element have id 
+				if (!dragStartElement.id) {
+					var dragStartElementChild = dragStartElement.dragStartElementChild
+					var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElementChild.id.replace(/^nav_/, '')}`);
+					var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
+					if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
+						maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement);
+					}
+				} else {
+					var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
+					var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
+					if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {			
+						maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement);
+					}
+				}
+			}
+			// After element Node Added
+			 else {
+				var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
+				var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
+
+				// End Element is Section 
+				if (maindragDropElement.id.replace(/\d+/g, '') == "section_title_") {
+					//Check First Element is Group 
+					if (maindragStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
+						var groupQuestionAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area')
+						if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
+							groupQuestionAddSection.appendChild(maindragStartElement)
+							// test.parentNode.insertBefore(maindragStartElement, test)
+						}
+					} else {
+						var textAndChoiceAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area');
+						if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
+							textAndChoiceAddSection.parentNode.insertBefore(maindragStartElement, textAndChoiceAddSection)
+						}
+					}
+				} 
+				//Check the Second Element is Group Question 
+				else if(maindragDropElement.id.replace(/\d+/g, '') == "draggedGroup_"){
+					//Check First Element is Group Question 
+					if (maindragStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
+						var groupQuestionAddGroupQuestion = maindragDropElement.querySelector('.nested-sortable');
+						if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
+							groupQuestionAddGroupQuestion.appendChild(maindragStartElement)
+						}
+					} 
+					//This allows Text and Choice 
+					else {
+						var groupQuestionAddTextChoice= maindragDropElement.querySelector('.nested-sortable').dragStartElementChild;
+						if (groupQuestionAddTextChoice) {
+							groupQuestionAddTextChoice.parentNode.insertBefore(maindragStartElement , groupQuestionAddTextChoice)
+						} else {
+							var groupQuestionAdd = maindragDropElement.querySelector('.nested-sortable')
+							etest.appendChild(maindragStartElement)
+							// test.parentNode.insertBefore(maindragStartElement , test)
+						}
+					}
+				}else{
+					maindragDropElement.parentNode.insertBefore(maindragStartElement , maindragDropElement)
+				}		
+			}
+		} 
+		//no need 
+		else {
+			var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
+			var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
+			if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
+				maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement.nextElementSibling);
+			}
+		}
+	}
+
diff --git a/assets/js/custom-js-css/nav_pane_hover.css b/assets/js/custom-js-css/nav_pane_hover.css
new file mode 100644
index 0000000..7d0aed5
--- /dev/null
+++ b/assets/js/custom-js-css/nav_pane_hover.css
@@ -0,0 +1,72 @@
+/* .section.main-heading:hover{
+    background-color: gray;
+    color: #333;
+} */
+/* .sectionHoverClass:hover{
+    background-color: aquamarine;
+} */
+
+/* .sectionHoverClass {
+    width: 500px;
+    height: 30px;
+    background-color: white;
+    transition: background-color 0.3s ease; 
+  }
+  
+  .sectionHoverClass:active {
+    background-color: aquamarine;
+  }
+  
+
+
+  
+
+  .questionDragHover {
+    width: 500px;
+    height: 30px;
+    background-color: white;
+    transition: background-color 0.3s ease; 
+  }
+  
+  .questionDragHover:hover{
+    height: 60px;   
+  }
+  .questionDragHover:active {
+    background-color: aquamarine;
+  } */
+
+
+
+
+  /* .draggedElementStart{
+    height: 30px;
+    font-weight: 50%;
+
+  } */
+
+  /* .draggedElementLeave{
+
+    background-color: #ccc;
+  } */
+
+
+  .dragOverElement{
+    /* width: 270px; */
+    /* padding: 40px 0px 0px 0px 0px ; */
+    /* margin-left: -20px; */
+    /* border: 2px solid #000; */
+    border: 2px solid rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    /* height: 50px; */
+    /* padding-left: 200px; */
+
+    /* background-color: #ccc; */
+  }
+
+
+  .fa-grip-horizontal{
+    /* position: absolute; */
+    /* right: -72px !important; */
+  }
+
+ 
\ No newline at end of file
diff --git a/assets/js/takeNumberOnly/takeNumberOnly.js b/assets/js/takeNumberOnly/takeNumberOnly.js
new file mode 100644
index 0000000..73c456c
--- /dev/null
+++ b/assets/js/takeNumberOnly/takeNumberOnly.js
@@ -0,0 +1,10 @@
+
+
+
+module.exports.takeNumberOnly = function (text) {
+    let number = text.match(/\d+/)[0];
+    return number
+}
+
+
+
diff --git a/nav_pane.js b/nav_pane.js
index 96910b4..c6ded58 100644
--- a/nav_pane.js
+++ b/nav_pane.js
@@ -1,6 +1,7 @@
 // const { css } = require("jquery");
 // const mathJaxPath = require.resolve('./node_modules/mathjax/es5/latest.js');
 // require(mathJaxPath);
+const takeNumberOnly = require('./assets/js/takeNumberOnly/takeNumberOnly')
 
 // Initialize an array to store the expanded section data-ids
 const expandedSections = [];
@@ -25,7 +26,7 @@ function navpane() {
 
         var html = html.replace(/<[^>]*>/g, '');
         if (html.length >= 30) {
-            html=html.slice(0,30 ) + '...';
+            html=html.slice(0,24 ) + ''; // ...
         }
         return html
 
@@ -55,9 +56,9 @@ function navpane() {
     
         // Truncate the content
         var truncatedContent = "";
-        if(textContent.length > 30)
+        if(textContent.length > 24)
         {
-            truncatedContent = textContent.substring(0, maxLength) + '...';
+            truncatedContent = textContent.substring(0, maxLength) + ''; // ...
         }
         else{
             truncatedContent = textContent;
@@ -89,6 +90,13 @@ function navpane() {
             const sectionId = section.section_id;;
             sectionDiv.setAttribute('data-id', sectionId);
             sectionDiv.className = 'section main-heading';
+            sectionDiv.setAttribute('id', `nav_section_title_${sectionId.match(/\d+/)[0]}`)
+            // sectionDiv.setAttribute('draggable', 'true');
+            sectionDiv.setAttribute("ondragstart" , "dragStart(this,event)");
+            sectionDiv.setAttribute("ondragend" , "dragEnd(this,event)");
+            sectionDiv.setAttribute("ondragover" , "dragOver(this,event)");
+            sectionDiv.setAttribute("ondrop" , "dragDrop(this,event)");
+            sectionDiv.setAttribute("ondragleave" ,"dragLeave(this,event)");
 
         //   console.log(section);
                 // console.log(typeof sectionDiv);
@@ -296,23 +304,36 @@ function navpane() {
     
     function createTreeNode(nodeData, parentNode) {
         const nodeDiv = document.createElement('div');
+        const nodeDivChildForIconAlgin = document.createElement('div');
         nodeDiv.className = "navContain";
         nodeDiv.classList.add('navDrag');
-
+        nodeDiv.appendChild(nodeDivChildForIconAlgin)
         // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
         const nodeDataId = nodeData.question_Id
         const nodeDataType = nodeData.question_type
         // console.log('nodeDataType:',nodeDataType);
-        parentNode.appendChild(nodeDiv);
+
+        if (nodeDataId) {
+            var navPaneQuestionId = takeNumberOnly.takeNumberOnly(nodeDataId)
+        }
+
 
 
         var bulletPoint = "";
+        var dragIcon = "";
+        dragIcon = document.createElement('i');
+                dragIcon.className = 'fas fa-grip-horizontal';
+				dragIcon.style.position = ''; 
+				dragIcon.style.right = '1260px';
         if (nodeData.question) {
-            
+            parentNode.appendChild(nodeDiv);
+
             var RawID = "";
             if(nodeDataType == 'text')
             {
                 bulletPoint = document.createElement('img');
+                
+
                 bulletPoint.src = 'assets/images/navtext.svg';
                 bulletPoint.style.marginRight = '5px';
                 bulletPoint.style.width = '13px';
@@ -320,8 +341,15 @@ function navpane() {
                 bulletPoint.style.color = '#00aaff';
                 // bulletPoint.textContent = '\u2022';
                 bulletPoint.setAttribute("title", "Descriptive");
-                nodeDiv.appendChild(bulletPoint);
-                
+                nodeDivChildForIconAlgin.appendChild(bulletPoint);
+                nodeDiv.id =`nav_removeAndCloneTextQuestion_${navPaneQuestionId}`;
+                nodeDiv.setAttribute('draggable', 'true');
+                nodeDiv.setAttribute("ondragstart" , "dragStart(this,event)");
+                nodeDiv.setAttribute("ondragend" , "dragEnd(this,event)");
+                nodeDiv.setAttribute("ondragover" , "dragOver(this,event)");
+                nodeDiv.setAttribute("ondrop" , "dragDrop(this,event)");
+                nodeDiv.setAttribute("ondragleave" , "dragLeave(this , event)");
+
                 var splitedId = nodeDataId.split("_")[1];
                 RawID = 'removeAndCloneTextQuestion_'+splitedId;
 
@@ -336,11 +364,18 @@ function navpane() {
                 bulletPoint.style.color = '#00aaff';
                 bulletPoint.setAttribute("title", "MCQ");
                 // bulletPoint.textContent = '\u2022';
-                nodeDiv.appendChild(bulletPoint);
+                nodeDiv.id =`nav_removeAndCloneQroupQuestion_${navPaneQuestionId}`;
+                nodeDiv.setAttribute('draggable', 'true');
+                nodeDiv.setAttribute("ondragstart" , "dragStart(this,event)");
+                nodeDiv.setAttribute("ondragend" , "dragEnd(this,event)");
+                nodeDiv.setAttribute("ondragover" , "dragOver(this,event)");
+                nodeDiv.setAttribute("ondrop" , "dragDrop(this,event)");
+                nodeDiv.setAttribute("ondragleave" , "dragLeave(this , event)");
+                // nodeDiv.style.justifyContent= 'space-between'
+                nodeDivChildForIconAlgin.appendChild(bulletPoint);
 
                 var splitedId = nodeDataId.split("_")[1];
                 RawID = 'removeAndCloneQroupQuestion_'+splitedId;
-    
             }
             
             var QuestionID = document.getElementById(RawID)
@@ -403,7 +438,8 @@ function navpane() {
                 nodeDiv.style.color ='black';
                 nodeDiv.style.marginLeft ='-67px';
                 nodeDiv.style.paddingLeft='67px';
-                nodeDiv.style.marginRight= '-75px'
+                // nodeDiv.style.marginRight= '-75px';
+                // nodeDiv.style.justifyContent= 'space-between';
                 QuestionID.style.fontWeight = '100';
                 currentlyHighlightedElement = nodeDiv;
                 // nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -431,6 +467,7 @@ function navpane() {
                 nodeDiv.style.color = ' black';
                 nodeDiv.style.marginLeft ='0px';
                 nodeDiv.style.paddingLeft='0px';
+                // nodeDiv.style.justifyContent= 'space-between'
                     currentlyHighlightedElement =null
                     // nodeDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     
@@ -471,8 +508,9 @@ function navpane() {
                 nodeDiv.style.color ='black';
                 nodeDiv.style.marginLeft ='-67px';
                 nodeDiv.style.paddingLeft='67px';
-                nodeDiv.style.marginRight= '-75px';
+                // nodeDiv.style.marginRight= '-75px';
                 nodeDiv.style.borderLeftWidth= '-75px';
+                // nodeDiv.style.justifyContent= 'space-between';
                     currentlyHighlightedElement = questionLink;
             });
             questionLink.addEventListener('mouseout', function () {
@@ -489,6 +527,7 @@ function navpane() {
                 nodeDiv.style.color = ' black';
                 nodeDiv.style.marginLeft ='0px';
                 nodeDiv.style.paddingLeft='0px';
+                // nodeDiv.style.justifyContent= 'space-between';
                     currentlyHighlightedElement =null
             });
 
@@ -518,12 +557,30 @@ function navpane() {
             // console.log('questionLink : ', questionLink)
 
     
-            nodeDiv.appendChild(questionLink);
+            nodeDivChildForIconAlgin.appendChild(questionLink);
+            nodeDiv.appendChild(dragIcon)
         } else if (nodeData.group_title) {
             const groupTitleDiv = document.createElement('div');
+            // const gripIcon = document.createElement('i');
+				// gripIcon.className = 'fas fa-grip-horizontal';
+				// gripIcon.style.position = 'fixed'; 
+				// gripIcon.style.right = '1260px';
+
+				// groupTitleDiv.appendChild(gripIcon);
+            
             const groupTitleId = nodeData.question_group_id;
+            console.log(groupTitleId);
+            const getNumberOnlyGroupTitleId = takeNumberOnly.takeNumberOnly(groupTitleId)
             groupTitleDiv.setAttribute('data-id', groupTitleId);
+            groupTitleDiv.setAttribute('id', `nav_draggedGroup_${getNumberOnlyGroupTitleId}`);
             groupTitleDiv.className = 'question-group';
+            groupTitleDiv.setAttribute('draggable', 'true');
+            groupTitleDiv.setAttribute("ondragstart" , "dragStart(this,event)");
+            groupTitleDiv.setAttribute("ondragend" , "dragEnd(this , event)");
+            groupTitleDiv.setAttribute("ondragover" , "dragOver(this,event)");
+            groupTitleDiv.setAttribute("ondragleave" , "dragLeave(this , event)")
+            groupTitleDiv.setAttribute("ondrop" , "dragDrop(this , event)");
+
             
             // console.log(groupTitleId);
 
@@ -539,13 +596,11 @@ function navpane() {
             } else {
                 groupTitleDiv.classList.add('collapsed');
             }
-
             if(editPage == 1 || editPage == null){
 
                 groupTitleDiv.classList.add('collapsed');
 
             }
-    
             parentNode.appendChild(groupTitleDiv);
     
             const groupTitleArrow = document.createElement('span');
@@ -564,7 +619,7 @@ function navpane() {
                 groupTitleArrow.className = 'arrow-down';
                 groupQuestionsDiv.classList.add('visible');
             }
-    
+
             groupTitleArrow.addEventListener('click', () => {
                 groupQuestionsDiv.classList.toggle('visible');
                 groupTitleDiv.classList.toggle('collapsed');
@@ -608,7 +663,7 @@ function navpane() {
     
             const groupQuestionLink = document.createElement('a');
             groupQuestionLink.href = '#' + groupTitleId;
-             
+
             // Attach the scroll function to the hyperlinks
             groupQuestionLink.addEventListener('click', function(e) {
                 e.preventDefault(); // Prevent the default behavior of the link
@@ -793,6 +848,7 @@ function navpane() {
             });
             parentNode.appendChild(groupQuestionsDiv);
         }
+
     }
 
     var questionPaperContainer = document.getElementById('questionPaper');
diff --git a/style.css b/style.css
index 8a4d538..751dec3 100644
--- a/style.css
+++ b/style.css
@@ -3612,6 +3612,7 @@ font-size: 14px;
 display: flex; 
 /* display: contents; */
 align-items: center; 
+justify-content: space-between;
 
 }