https://formation.ch-alpes-isere.fr/lib/javascript.php/1789977024/…/eticeo_drag_and_drop.js

1class EticeoDragAndDrop{constructor(selectElement,input=null){this.selectElement=selectElement;this.selectElement.style.display='none';this.input=input;this.submitValues=[];this.initialize()}
2initialize(){this.createContainer();this.createDropzone();this.setInitialOrigins();this.placeElementsInDropzones();this.setupDragAndDrop()}
3createContainer(){this.container=document.createElement('div');this.container.classList.add('container-eticeo-dnd');this.container.classList.add('container');this.selectElement.insertAdjacentElement('afterend',this.container);this.settingsContainer=document.createElement('div');this.settingsContainer.classList.add('settings');this.container.appendChild(this.settingsContainer);Array.from(this.selectElement.options).forEach(option=>{const settingDiv=document.createElement('div');settingDiv.classList.add('setting');settingDiv.textContent=option.textContent;settingDiv.setAttribute('data-id',option.value);if(option.selected||option.dataset.origin==='dropzone'){settingDiv.setAttribute('data-origin','dropzone')}
4this.settingsContainer.appendChild(settingDiv)})}
5createDropzone(){this.dropzone=document.createElement('div');this.dropzone.classList.add('dropzone');this.dropzone.textContent='Déposez les paramètres ici';this.container.appendChild(this.dropzone)}
6setInitialOrigins(){this.settingsContainer.querySelectorAll('.setting').forEach(element=>{if(!element.hasAttribute('data-origin')){element.setAttribute('data-origin','settings')}})}
7placeElementsInDropzones(){this.settingsContainer.querySelectorAll('.setting').forEach(element=>{var originClass=element.getAttribute('data-origin');var originContainer=this.container.querySelector(`.${originClass}`);if(originContainer){originContainer.appendChild(element)}})}
8setupDragAndDrop(){const settingsItems=this.container.querySelectorAll('.setting');settingsItems.forEach(item=>{item.draggable=!0;item.addEventListener('dragstart',(e)=>{e.dataTransfer.setData('text/plain',e.target.getAttribute('data-id'));e.target.classList.add('dragging')});item.addEventListener('dragend',(e)=>{e.target.classList.remove('dragging');this.updateSelectElement();this.updateInputValues()})});const dropzones=this.container.querySelectorAll('.settings, .dropzone');dropzones.forEach(zone=>{zone.addEventListener('dragover',(e)=>{e.preventDefault();zone.classList.add('dragover');const dragging=this.container.querySelector('.dragging');const afterElement=this.getDragAfterElement(zone,e.clientY);if(afterElement==null){zone.appendChild(dragging)}else{zone.insertBefore(dragging,afterElement)}});zone.addEventListener('dragleave',()=>{zone.classList.remove('dragover')});zone.addEventListener('drop',(e)=>{e.preventDefault();const id=e.dataTransfer.getData('text/plain');const draggableElement=this.container.querySelector(`.setting[data-id='${id}']`);zone.classList.remove('dragover');draggableElement.setAttribute('data-origin',zone.className.split(' ')[0]);this.updateSelectElement();this.updateInputValues()})})}
9getDragAfterElement(container,y){const draggableElements=[...container.querySelectorAll('.setting:not(.dragging)')];return draggableElements.reduce((closest,child)=>{const box=child.getBoundingClientRect();const offset=y-box.top-box.height/2;if(offset<0&&offset>closest.offset){return{offset:offset,element:child}}else{return closest}},{offset:Number.NEGATIVE_INFINITY}).element}
10updateInputValues(){const selectedOptionsDropzone=this.getSettingsInDropzone();Array.from(selectedOptionsDropzone).forEach(option=>{const index=this.submitValues.indexOf(option);if(index!==-1){this.submitValues.splice(index,1)}
11this.submitValues.push(option)});const selectedOptionsContainer=this.getSettingsInContainer();Array.from(this.submitValues).forEach(option=>{if(selectedOptionsContainer.includes(option)){const index=this.submitValues.indexOf(option);if(index!==-1){this.submitValues.splice(index,1)}}});if(this.input!==null){this.input.value=JSON.stringify(this.submitValues)}}
12updateSelectElement(){const selectedOptions=this.getSettingsInDropzone();Array.from(this.selectElement.options).forEach(option=>{if(selectedOptions.includes(option.value)){option.selected=!0;option.dataset.origin='dropzone'}else{option.selected=!1;option.dataset.origin=''}});const orderedOptions=selectedOptions.map(value=>{return Array.from(this.selectElement.options).find(option=>option.value===value)});orderedOptions.forEach(option=>{this.selectElement.appendChild(option)})}
13getSettingsInDropzone(){let divs=Array.from(this.dropzone.querySelectorAll('.setting'));return divs.map(div=>div.getAttribute('data-id'))}
14getSettingsInContainer(){const settingsContainer=this.container.querySelector('.settings');let divs=Array.from(settingsContainer.querySelectorAll('.setting'));return divs.map(div=>div.innerText)}}