DRAG&DROP
This commit is contained in:
aadhavan
parent
9bc8c93824
commit
e4663c28b2
@ -51,6 +51,11 @@
|
||||
|
||||
|
||||
<style>
|
||||
.question_Text img{
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
|
||||
.ql-align-right-add{
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
90
addform.html
90
addform.html
@ -52,9 +52,22 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
|
||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> -->
|
||||
<script id="MathJax-script" async src="./node_modules/mathjax/es5/tex-mml-chtml.js"></script>
|
||||
<link rel="stylesheet" href="assets/css/quillTable.css" type="text/css" media="all" />
|
||||
|
||||
<style>
|
||||
|
||||
.ql-toolbar .ql-picker.ql-table .ql-picker-item{
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#ql-picker-options-14{
|
||||
margin: -327px 0px 0px -217px;
|
||||
}
|
||||
|
||||
#ql-picker-options-15{
|
||||
margin: -199px 0px 0px -252px;
|
||||
}
|
||||
|
||||
/* Start custom css for table icon options in RTE editor */
|
||||
.ql-picker.ql-table:nth-of-type(1) .ql-picker-options {
|
||||
width: 310px !important;
|
||||
@ -875,8 +888,26 @@ var toolbarOptions = [
|
||||
var quill = new Quill('#workarea', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: toolbarOptions,
|
||||
}
|
||||
imageResize:{
|
||||
displaySize:true,
|
||||
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ],
|
||||
},
|
||||
toolbar: {
|
||||
container: toolbarOptions,
|
||||
handlers: {
|
||||
table: function () {
|
||||
// this.quill.getModule('table').insert();
|
||||
|
||||
this.quill.getModule('table').insert();
|
||||
},
|
||||
},
|
||||
},
|
||||
table: {
|
||||
cellSelectionOnClick: true,
|
||||
// Other options for quill1-table module...
|
||||
},
|
||||
keyboard: keyboardOptions,
|
||||
},
|
||||
});
|
||||
|
||||
var chat_Div = $("#workarea");
|
||||
@ -1640,6 +1671,7 @@ function loadXML(xmlFileName) {
|
||||
|
||||
// Function for Save the XML File
|
||||
function saveFile(flag=0) {
|
||||
console.log("flag = ", flag);
|
||||
console.log("SaveFile");
|
||||
var title_id = localStorage.getItem('JSON_FOR_EMPTY_QUESTION');
|
||||
|
||||
@ -1669,9 +1701,11 @@ function saveFile(flag=0) {
|
||||
const newFileName = FileName.split(".")[0];
|
||||
//if 1 it is used for re-order and redirect to the qn paper itself
|
||||
if (flag==1){
|
||||
// alert("reorder True")
|
||||
savexml(newFileName,reorder=true);
|
||||
//if 0 it is used as nrml save which will redierect to dashboard
|
||||
}else{
|
||||
// alert("reorder Flase")
|
||||
savexml(newFileName);
|
||||
}
|
||||
|
||||
@ -2441,16 +2475,16 @@ function addQuestionGroup(idObj)
|
||||
// console.log(group_question_id);
|
||||
|
||||
addQuestionGroup +=
|
||||
`<div draggable='true' class="draggable-group hidedrag" id="draggedGroup_${QuestionGroup_ID}">
|
||||
`<div draggable='' class="draggable-group hidedrag" id="draggedGroup_${QuestionGroup_ID}">
|
||||
<i id="collapseSubSection_${QuestionGroup_ID}" aria-hidden="true" style=" font-size: 24px; margin-right: 9px; margin-top: 25px;"></i>
|
||||
<input type="hidden" id="Question_Group_UUID_ID_${QuestionGroup_ID}" value="${idObj.hasOwnProperty('question_group_obj') ? idObj.question_group_obj.attributes.Id : QuestionGroup_UUID}">
|
||||
<div class="groupsection" draggable='true' id="group_question_${QuestionGroup_ID}">
|
||||
<div class="groupsection" draggable='' id="group_question_${QuestionGroup_ID}">
|
||||
<div class="question-group-linestyle"><img src="assets/images/line2.svg"/></div>
|
||||
<div class="sectionTitle" id="group_question_title_${QuestionGroup_ID}">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
<div onmouseover="showButtons(this)" id="QuestionGroupButtons_${QuestionGroup_ID}" class="row question element">
|
||||
<div id="dragHandle" class="drag-handle">
|
||||
<i class="fas fa-grip-horizontal"></i>
|
||||
<div id="dragHandle" class="drag-handle" >
|
||||
<i class="fas fa-grip-horizontal" draggable="true"></i>
|
||||
</div>
|
||||
<h4 class="QuestionGroup-titleHead">Question Group</h4>
|
||||
<div class="items align-items-center hideondrag">
|
||||
@ -2887,10 +2921,10 @@ function groupQuestion(question_id = false, section_id = false , group_question_
|
||||
// console.log(questionIdS);
|
||||
// aa =2
|
||||
groupQuestion +=
|
||||
`<div class="question hidedrag element Question-Border-Top col-lg-12 choiceQuestion" draggable="true" id="removeAndCloneQroupQuestion_${addChoiceAreaId}" style="" onclick="toggleClasses(this); multipleAnswerCheck(this); resetthe_radio(this)" onmouseover="showButtons(this); ">
|
||||
`<div class="question hidedrag element Question-Border-Top col-lg-12 choiceQuestion" draggable="" id="removeAndCloneQroupQuestion_${addChoiceAreaId}" style="" onclick="toggleClasses(this); multipleAnswerCheck(this); resetthe_radio(this)" onmouseover="showButtons(this); ">
|
||||
<div class="question-linestyle"><img src="assets/images/${lineImg}"/></div>
|
||||
<div id="dragHandle" class="drag-handle">
|
||||
<i class="fas fa-grip-horizontal"></i>
|
||||
<i class="fas fa-grip-horizontal" draggable="true"></i>
|
||||
</div>
|
||||
<div class="items hideondrag" style="display: none;">
|
||||
<i onclick="ReArrangeQuestions(event)" class="fa fa-chevron-up up-icon"></i>
|
||||
@ -3710,10 +3744,10 @@ var ssa=ss.replace('<p>','').replace('</p>','').replace('<br>','');
|
||||
// console.log(ssa);
|
||||
|
||||
textQuestion +=
|
||||
`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable="true" id="removeAndCloneTextQuestion_${addTextQuestionId}" style="" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
|
||||
`<div class="col-lg-12 question hidedrag element Question-Border-Top" draggable="" id="removeAndCloneTextQuestion_${addTextQuestionId}" style="" onclick="toggleClasses(this)" onmouseover="showButtons(this)">
|
||||
<div class="question-linestyle"><img src="assets/images/${lineImg}"/></div>
|
||||
<div id="dragHandle" class="drag-handle">
|
||||
<i class="fas fa-grip-horizontal"></i>
|
||||
<div id="dragHandle" class="drag-handle" >
|
||||
<i class="fas fa-grip-horizontal" draggable="true"></i>
|
||||
</div>
|
||||
|
||||
<div class="items align-items-center hideondrag" style="display: none;">
|
||||
@ -4682,7 +4716,7 @@ return text;
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
let draggedItemGroup = null;
|
||||
let draggedItemQuestion = null;
|
||||
let dropTarget = null;
|
||||
@ -4811,7 +4845,10 @@ return text;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
@ -5296,5 +5333,32 @@ function findInputByValue(value) {
|
||||
</script>
|
||||
<!-- End the Choice Question Mandatory Check -->
|
||||
|
||||
|
||||
|
||||
<!-- <script>
|
||||
|
||||
function name(params) {
|
||||
|
||||
var drags = document.querySelector('.fa-grip-horizontal')
|
||||
var a =drags.parentNode.parentNode
|
||||
|
||||
drags.addEventListener('dragstart', function(event){
|
||||
// a.draggable = true
|
||||
|
||||
})
|
||||
|
||||
drags.addEventListener('dragend', function(event){
|
||||
a.draggable = false
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
setInterval(name, 2000)
|
||||
|
||||
|
||||
|
||||
</script> -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -235,7 +235,7 @@ function html2json() {
|
||||
|
||||
$.fn.getSectionData = function(element) {
|
||||
// console.log('getSectionData');
|
||||
// console.log(element.id);
|
||||
console.log(element);
|
||||
const rand_id = (element.id).split("_").slice(-1)[0];
|
||||
// console.log(rand_id);
|
||||
// console.log('section_title_text_'+rand_id);
|
||||
@ -304,6 +304,7 @@ function html2json() {
|
||||
});
|
||||
|
||||
console.log((formData));
|
||||
// return false
|
||||
// console.log(JSON.stringify(formData, null, 1));
|
||||
localStorage.setItem("json", JSON.stringify((formData)));
|
||||
console.log(JSON.stringify(formData));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user