Pluggable Widget

0
Hi,   I've created a pluggable widget which can contain other widgets using:   <property key="content" type="widgets">   I added drag and drop functionality to the Text box Input elements placed inside the Pluggable Widget, in React. When I drop the text from one of the elements to another the text changes. On clicking in the updated Text box, however, the text immediately returns to what it was.   This is probably some kind of state functionality, but I haven't found what it is exactly. I've tried the following: Update all '*value*’ attributes, mx.ui.getContentForm() and update jsonData, _valueTracker.setValue, etc. How would I continue from here?    
asked
1 answers
0

Hi Ganesh,

 

There you go, thanks!

 

import { createElement, useEffect, useState } from "react";

import "./ui/DragableInputContainer.css";

export function DragableInputContainer({ content }) {
    const handleDragOver = event => {
        event.preventDefault();
        event.dataTransfer.dropEffect = "move";
    };

    const handleDragStart = (event, item) => {
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.setData("draggedId", event.target.id);
    };

    const handleDrop = (event, item) => {
        event.preventDefault();
        const draggedId = event.dataTransfer.getData("draggedId");
        const source = document.getElementById(draggedId);
        item.value = source.value;
    };

    useEffect(() => {
        const container = document.querySelector(".dragable-input-container-widget");
        const elements = container.querySelectorAll(".mx-textbox input");
        Array.from(elements).forEach(element => {
            element.draggable = true;
            element.ondragstart = event => handleDragStart(event, element);
            element.ondragover = handleDragOver;
            element.ondrop = event => handleDrop(event, element);
        });
    }, []);

    return <div className="dragable-input-container-widget">{content}</div>;
}

 

answered