🎯 Goal

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

📁 Section 1. Extension of the "one 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 type "one line".

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 connected 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 activated;

• opens and closes 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 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;

• shows current selected items (icons) in a specified order;

• allows changing order by dragging;

• allows deleting an item (icon with a cross);

• prevents duplicate addition of the same item;

• saves selected IDs as a comma-separated string (for example: 3,7,12,6,8).

Fields must have unique IDs and be linked with input name="xfield[name]".

It should be possible to use several such fields on one page.

💾 Section 6. Save and edit behavior

When saving news:

• selected items are saved in a hidden input field;

• this value is sent to DLE and saved as a regular additional field value.

When editing again:

• the module reads the ID string (for example: "5,9,14");

• items are recreated in the interface in the correct order based on these IDs;

• the user sees the same items that were saved and can edit them.

All saving logic is within the standard DLE xfields mechanism.

🎨 Section 7. Design and implementation

• Use the design and styles from the dragitems.html layout

🎛️ Section 8. Drag-n-drop and modal behavior

Dragging:

• users can change the order of items;

• placeholder shows the insertion point;

• 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 and all necessary files

• installation instructions.

Documentation:

• on connecting the module and configuration.

Compatibility:

• Full compatibility with DLE 14.0 and

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