EZP-29606: As a developer I want to have a generic interface for drag and drop interactions

[sunpietro]

Question	Answer
Tickets	https://jira.ez.no/browse/EZP-29606
Bug fix?	no
New feature?	yes
BC breaks?	no
Tests pass?	yes
Doc needed?	yes
License	GPL-2.0

FOR QA

There is nothing to test in this PR. This developer feature will be used in other PRs.

How to use it?

Prepare the HTML structure like this:

<div class="items-container" data-placeholder="HTML template for placeholder"></div>

In your JS code follow the convention:

const draggable = new global.eZ.core.Draggable({
        itemsContainer: HTMLElement of .items-container,
        selectorItem: String,
        selectorPlaceholder: String,
});

Options

• itemsContainer - a reference to DOM node containing a draggable items,
• selectorItem - a CSS selector of a draggable item,
• selectorPlaceholder - a CSS selector of a placeholder,
• afterInit - a callback function invoked after interface initialization (optional),
• afterDragStart - a callback function invoked after starting to drag (optional),
• afterDragOver - a callback function invoked after moving onto a droppable element (optional),
• afterDrop - a callback function invoked after dropping an element (optional),
• attachCustomEventHandlersToItem - a function to be invoked while attaching event handlers to every item in the items container (optional).

[tischsoic]

I think we call it everywhere config, not options, so maybe it would be a good idea to call it config here.

[sunpietro]

Ok, let's change it to config

[tischsoic]

Is this a new way we are going to protect private methods?

[sunpietro]

Yes, exactly.

[tischsoic]

For me sticking with original convention and naming it onDragStart would be better. onDragStart is more precise (after may be even after DragEnd) and is well known.
I know that it might be confusing from class perspective but we may change class methods's names to e.g. handleDragStart or change something else etc.

[sunpietro]

Yes, but these methods are always fired after everything is done in our dragstart or dragover handlers. That's why I named these callbacks as afterDragStart and afterDragOver