316 lines
13 KiB
JavaScript
316 lines
13 KiB
JavaScript
|
|
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;
|
|
// console.log('dropTarget : ', dropTarget)
|
|
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
|
|
// console.log('First If');
|
|
if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
|
|
// console.log('Second If');
|
|
if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
|
|
// console.log('third If');
|
|
var dragDropElementChild = dragDropElement.nextElementSibling.dragStartElementChild;
|
|
var dragStartElementChild = dragStartElement.nextElementSibling;
|
|
if (dragDropElementChild) {
|
|
// console.log('Fourth If');
|
|
dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild)
|
|
dragDropElementChild.parentNode.insertBefore(dragStartElementChild, dragDropElementChild)
|
|
insertElement(dragStartElement,dragDropElement,"after");
|
|
} else {
|
|
// console.log('Fourth If 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, "after")
|
|
}
|
|
}
|
|
}
|
|
//Check Drop Element is Section
|
|
else if(dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_"){
|
|
// console.log('Second else If');
|
|
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 {
|
|
// console.log('Second If else');
|
|
//Check the Start Element is Group Question
|
|
if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
|
|
// console.log('Second if else if')
|
|
var parent = dragDropElement.parentNode;
|
|
// console.log('parent : ', parent)
|
|
var lastChild = parent.lastChild;
|
|
// console.log('lastChild : ', 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 {
|
|
// console.log('Second if else 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')
|
|
var matches = dragDropElement.id.match(/([a-zA-Z_]+)([0-9]+)/);
|
|
|
|
var Section = document.getElementById('question_area_'+matches[2]);
|
|
var innerElementCount = ''
|
|
if(Section){
|
|
innerElementCount = Section.childElementCount;
|
|
}
|
|
else{
|
|
innerElementCount = 1;
|
|
}
|
|
|
|
if(innerElementCount === 0){
|
|
var QuestionStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
|
|
var QuestionDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
|
|
|
|
//Check First Element is Group
|
|
if (QuestionStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
|
|
if (QuestionStartElement && Section && QuestionStartElement !== Section) {
|
|
Section.appendChild(QuestionStartElement)
|
|
}
|
|
} else {
|
|
if (QuestionStartElement && Section && QuestionStartElement !== Section) {
|
|
Section.appendChild(QuestionStartElement)
|
|
}
|
|
}
|
|
}else{
|
|
|
|
//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_/, '')}`);
|
|
|
|
// console.log('maindragDropElement : ', maindragDropElement);
|
|
|
|
// 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')
|
|
// console.log('groupQuestionAddSection : ', groupQuestionAddSection);
|
|
if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {
|
|
groupQuestionAddSection.appendChild(maindragStartElement)
|
|
// test.parentNode.insertBefore(maindragStartElement, test)
|
|
}
|
|
} else {
|
|
var textAndChoiceAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area');
|
|
// console.log('textAndChoiceAddSection : ', textAndChoiceAddSection);
|
|
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')
|
|
// console.log(groupQuestionAdd);
|
|
groupQuestionAdd.appendChild(maindragStartElement)
|
|
// console.log(groupQuestionAdd);
|
|
// alert("111")
|
|
// test.parentNode.insertBefore(maindragStartElement , test)
|
|
}
|
|
}
|
|
}else{
|
|
// console.log('parentNode : ', maindragDropElement.parentNode);
|
|
// console.log('maindragStartElement : ', maindragStartElement);
|
|
maindragDropElement.parentNode.insertBefore(maindragStartElement , maindragDropElement.nextSibling)
|
|
}
|
|
}
|
|
}
|
|
//no need
|
|
else {
|
|
|
|
console.log('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);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|