Form ezform to drag and drop specific fields

automaticDragAndDrop.js

/**
 * Source: https://gist.github.com/leesaxby/fabc59c82569a225f8d833b5924e23c6
 * @param sourceNode
 * @param destinationNode
 */
const automaticDragAndDrop = (sourceNode, destinationNode) => {
    const DRAG_OVER = 'dragover';
    const DRAG_END = 'dragend';
    const DRAG_START = 'dragstart';
    const DROP = 'drop';


    const createCustomEvent = (type) => {
        const event = new CustomEvent('CustomEvent');
        event.initCustomEvent(type, true, true, null);
        event.dataTransfer = {
            data: {},
            setData (type, val) {
                this.data[type] = val;
            },
            getData (type) {
                return this.data[type];
            },
            // This ensures the directives 'dnd-moved=""' callback is fired
            // on the 'dragend' event, removing the original dragged element..
            dropEffect: 'move'

        };
        return event;
    };

    const dispatchEvent = (node, event) => {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event);
        }
    };

    const addType = (sourceNode) => {
        const defaultType = 'application/x-dnd';
        const customType = sourceNode.getAttribute('dnd-type');

        if (customType) {
            // Remove single quotes if any present.
            // dnd-list converts any types provided by 'dnd-type="'xXxX'"' to lowercase, so match that here.
            const formattedStr = customType.replace(/'/g,'');
            return [`${defaultType}-${formattedStr.toLowerCase()}`];
        }

        return [defaultType];
    };

    const event = createCustomEvent(DRAG_START);
    event.dataTransfer.types = addType(sourceNode, destinationNode);
    dispatchEvent(sourceNode, event);

    const dragOverEvent = createCustomEvent(DRAG_OVER);
    dragOverEvent.dataTransfer = event.dataTransfer;
    dispatchEvent(destinationNode, dragOverEvent);

    // When the the first element is dragged over the second element a placeholder
    // element will appear, this becomes the element the dragged element drops upon.
    const dropNode = document.querySelector('.dndPlaceholder');

    const dropEvent = createCustomEvent(DROP);
    dropEvent.dataTransfer = event.dataTransfer;
    dispatchEvent(destinationNode, dropEvent);

    const dragEndEvent = createCustomEvent(DRAG_END);
    dragEndEvent.dataTransfer = event.dataTransfer;
    dispatchEvent(sourceNode, dragEndEvent);
};

exports.automaticDragAndDrop = automaticDragAndDrop;

content_update.html.twig

# I'm using ezdesign override
# So i put it this file in templates/themes/admin/content_update.html.twig

{{ encore_entry_script_tags('check_form_fields', null, null) }}

ezform.js

import { automaticDragAndDrop } from "../../components/automaticDragAndDrop";

;(function() {
    const BTN_OPEN_FORM = 'button.ez-btn--edit[data-open-form-builder], button.ez-form-builder__btn--create[data-open-form-builder]';
    const BTN_VALID_FORM = 'button.ez-form-builder-modal__btn--back';

    /**
     *
     */
    const loadMandatoryFields = () => {
        let listButtons = document.querySelectorAll(BTN_OPEN_FORM);
        listButtons.forEach(btnOpenForm => {
            /**
             * INIT WHEN OPEN MODAL FORM
             * @param e
             */
            btnOpenForm.onclick = (e) => {
                displayMsgError();
                let destinationNode = document.querySelector('div.m-form-builder__workspace');

                // List items mandatory from left side
                const LIST_DIV_SIDEBAR = Array.from(document.querySelectorAll('div.c-sidebar-field')).filter(div => {
                    return true === ['captcha', 'button'].includes(div.dataset.ezSidebarFieldType);
                });

                // Set colors in left side in red
                LIST_DIV_SIDEBAR.forEach(div => {
                    div.querySelector('div.c-sidebar-field__label').style.color = 'red';
                });

                // Labels of mandatory field added
                const LIST_MANDATORY_LABELS = LIST_DIV_SIDEBAR.map(div => {
                    return div.querySelector('div.c-sidebar-field__label').innerHTML;
                });


                const LIST_DIV_MANDATORY_FIELDS = Array.from(document.querySelectorAll('div.c-form-field')).filter(div => {
                    return true === LIST_MANDATORY_LABELS.includes(div.querySelector('div.c-form-field__label').innerHTML);
                });

                if (0 < document.querySelectorAll('div.c-form-field').length) {
                    // Disable drag drop if already display yet
                    LIST_DIV_MANDATORY_FIELDS.forEach(node => {
                        // remove drag and drop
                        disableFormElement(node);
                    });
                } else {
                    LIST_DIV_SIDEBAR.forEach(div => {
                        // Only if div is dragged
                        div.ondragend = (e) => {
                            let textToMatch = e.currentTarget.querySelector('div.c-sidebar-field__label').innerHTML;
                            let draggedDiv = Array.from(document.querySelectorAll('div.c-form-field')).filter(div => {
                                return textToMatch === div.querySelector('div.c-form-field__label').innerHTML;
                            })[0];
                            disableFormElement(draggedDiv);
                        };
                    });

                    // Automatic drag and drop
                    LIST_DIV_SIDEBAR.forEach(div => automaticDragAndDrop(div, destinationNode));

                    // Disable buttons when drag side item
                    LIST_DIV_MANDATORY_FIELDS.forEach(node => {
                        // remove drag and drop
                        disableFormElement(node);
                    });
                }
            };
        });
    };

    /**
     * Show message "mandatory fields"
     */
    const displayMsgError = () => {
        let siblingDiv = document.querySelector('div.ez-form-builder-modal__header');
        if (null !== document.querySelectorAll('div[data-type="mandatory-fields"]') && 1 <= document.querySelectorAll('div[data-type="mandatory-fields"]').length) {
            document.querySelectorAll('div[data-type="mandatory-fields"]').forEach(div => div.remove());
        }

        let msgAlert = document.createElement('div');
        msgAlert.classList.add('alert', 'alert-danger');
        msgAlert.dataset.type = 'mandatory-fields';
        msgAlert.innerHTML = 'Les champs "Captcha" et "Bouton" sont obligatoire.';
        siblingDiv.parentNode.insertBefore(msgAlert, siblingDiv.nextSibling);
    };

    /**
     * Disable field
     * @param item
     */
    const disableFormElement = (item) => {
        item.setAttribute("data-field-mandatory", '');
        item.removeAttribute('draggable');
        item.onmousedown = "return false;";
        item.style.cursor = 'not-allowed';
        // disable delete button
        item.querySelectorAll('div.c-form-field__trash button.c-action').forEach(btn => {
            btn.parentNode.removeChild(btn);
        } );
    };

    /**
     *
     */
    document.addEventListener('DOMContentLoaded', (e) => {
        loadMandatoryFields();
    });
})();

services.yml

  my_component.components.content_update:
    class: EzSystems\EzPlatformAdminUi\Component\TwigComponent
    autowire: true
    autoconfigure: false
    public: false
    arguments:
      $template: '@@ezdesign/themes/admin/content_update.html.twig' # <- change it if needed
      $parameters:
        type_site: 'hub'
    tags:
      - { name: ezplatform.admin_ui.component, group: content-edit-form-before }
      - { name: ezplatform.admin_ui.component, group: content-create-form-before }
      - { name: ez.twig.component }

webpack.config.js

Encore.reset();
Encore
  // blabla...
  .addEntry('check_form_fields', './assets/js/admincheck_ezform.js');