Add draggable Key and Access to Child Widget Data Structure in Custom Widgets

[syroonx]

Describe the Problem

Managing complex widgets like mega menus is difficult:

• Each section may have nested items, columns, or tabs.
• Widget panel becomes cluttered and confusing.
• Elementor provides a data structure for containers, but such access does not exist for custom widgets.

Example: A mega menu with three sections (nested items, columns, tabs) in a single widget creates a cluttered panel and complex drag & drop management.

Propose a Solution

Proposed Solution:

1. Add an official draggable key to control add/remove/reorder in custom containers:

"draggable" => [
"add" => false,
"remove" => false,
"reorder" => false,
]

• isDroppingAllowed should respect this key.
• This allows locking the container so child widgets cannot be added, removed, or reordered.

2. Provide access to the internal widget data structure similar to Container:

• Child widgets should be selectable via a control (like select).
• After selection, the widget is added to the container and the container is locked.
• This access should be officially supported in JS to manage children without hacks.

3. Simplify complex widget management:

• Each mega menu section becomes a main widget.
• Inside each widget, a container allows selecting child widgets.
• Complex widgets are split into simpler, manageable parts.

Example data structure:

{
  "id": "6af611eb",
  "elType": "container",
  "elements": [
    {
      "id": "6a637978",
      "elType": "widget",
      "widgetType": "heading",
      "settings": { "title": "Heading", "align": "center" },
      "elements": []
    },
    {
      "id": "687dba89",
      "elType": "widget",
      "widgetType": "image",
      "settings": { "_padding": { "top": "100", "bottom": "100", "left": "0", "right": "0", "unit": "px" } },
      "elements": []
    },
    {
      "id": "6f58bb5",
      "elType": "widget",
      "widgetType": "button",
      "settings": { "text": "Click Me", "button_text_color": "#000000", "background_color": "#E7DFF5" },
      "elements": []
    }
  ]
}

Additional Context

Additional Context (Optional / Code Examples):

// JS: enable nested draggable
jQuery(window).on('elementor:init', function () {
   elementorCommon.elements.$window.on('elementor/nested-element-type-loaded', async () => {
      class AccordionNestedView extends $e.components.get('nested-elements').exports.NestedView {
         onAddChild(childView) {
            const accordionLabelId = childView._parent.$el.find('summary')?.attr('aria-controls');
            if (accordionLabelId) {
               childView.$el.attr({ role: 'region', 'aria-labelledby': accordionLabelId });
            }
         }
      }
      class NestedAccordionElement extends elementor.modules.elements.types.NestedElementBase {
         getType() { return 'nested-accordion-syr'; }
         getView() { return AccordionNestedView; }
      }
      elementor.elementsManager.registerElementType(new NestedAccordionElement());
   });
});

// PHP: draggable key in settings
"draggable" => [
"add" => false,
"remove" => false,
"reorder" => false,
],

• Official draggable key for custom widgets to lock add/remove/reorder.
• Access to internal widget data structure to manage child widgets via select/control.
• Simplify creation of complex widgets by breaking them into main widget + selectable child widgets.

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.