🎯 Goal

Create a visual item builder module for the system DLE 14.0, allowing to convert additional fields (of the "single line" type) into 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 a visual template.

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

In the DLE admin panel, in the additional 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 displayed;

• 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 additional field editing form;

• its value is saved and loaded during editing;

• in the admin panel, in the news add/edit form, the drag-n-drop interface is enabled based on this parameter.

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

A single modal window is created, which:

• 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 item selection.

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 own 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 an AJAX request to a special PHP file (for example, load_items.php), which:

• loads all news from category 11;

• reads the additional fields itemimage and rune-color;

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

• returns a JSON or HTML list of items.

After receiving 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;

• placeholder shows the insertion point;

• no restrictions on moving, except for duplicate checking.

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 and 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.