🎯 Goal

Create a visual item builder module for the DLE 14.0 system that allows converting additional fields (type "single line") into a drag-n-drop interface with data saving.
The system must be fully integrated into the DLE admin panel and use the layout dragitems.html as the visual template.

📁 Section 1. Extension of the "single line" custom field type

In the DLE admin panel, in the custom fields editing section, add a new checkbox:

☑ Enable drag-n-drop item builder

This checkbox is added only for fields of the "single line" type.

When activated:

• the field automatically turns into a drag-n-drop interface;

• when deactivated, a regular text field is shown;

• the checkbox value is saved in the field parameter (for example, editedxfield[28]).

Behavior must be compatible with the xfields system:

• the checkbox appears in the custom field editing form;

• its value is saved and loaded during editing;

• in the admin panel, in the news add/edit form, this parameter activates the drag-n-drop interface.

🪟 Section 2. Modal window with items (single source)

A single modal window is created that:

• displays available items;

• works with all fields where drag-n-drop is enabled;

• can be opened and closed manually with a button;

• does not close automatically after selecting items.

Source:

• Items are loaded from the DLE category with ID = 11.

Each item must have:

• a itemimage field (item image);

• a rune-color field (damage type: red, orange, green, blue).

• Each item in the modal must contain its ID.

• This ID will be transferred to the drag-n-drop field when dragging.
  
  ❗ Each item in the modal window must contain its actual ID (material ID), which will be used when dragging the item into the “drop” zone. After dropping, its ID is saved as a comma-separated string — for example: 3,7,12,6,8. These values are the final content of the additional field.

Filtering:

• The modal should have filters by color (red, orange, green, blue);

• The "Reset" button shows all items.

Exceptions:

• In the module code, you can set an array of item IDs that should not be displayed;
  example:

  php$excluded_items = [12, 57, 88];
  
  

📦 Section 4. Item loading technology

All items for the builder are stored as regular news in the DLE category with ID = 11.

When opening the add or edit news form:

JavaScript sends a AJAX request to a special PHP file (for example, load_items.php), which:

• loads all news from category 11;

• reads the custom fields itemimage and rune-color;

• excludes specified IDs (for example, $excluded_items = [12, 45]);

• returns JSON or HTML with the list of items.

After receiving the data:

• the module displays items in the modal;

• allows filtering by color;

• allows dragging into any active field.

🔧 Section 5. Drag-n-drop fields behavior and logic

Each field with enabled drag-n-drop:

• displays an area where items can be dragged;

• shows placeholder for insertion;

• no restrictions on moving, except for duplicate checks.

Modal window:

• always available when adding or editing news;

• does not close automatically upon selection;

• works for all drag-n-drop zones on the page.

📑 Section 9. What to provide:

Full working module:

• patch for xfields.php & all necessary files

• installation instructions.

Documentation:

• on module connection and setup.

Compatibility:

• Full compatibility with DLE 14.0 and

• xField Tab module — grouping of additional fields into tabs.