feat(ui5-tabcontainer, ui5-list): add events for reordering items by mouse

[dimovpetar]

Properties and events will be documented with another PR.

BGSOFUIRODOPI-3189

[dimovpetar]

TODO: Rename DropPlacement" to "Placement"

Done

[dimovpetar]

If in "ui5-move-over" the "e.preventDefault();" is not called, the needle shouldn't be shown.

Fixed

[LidiyaGeorgieva]

I tested noticed the following:
For the list (http://localhost:8080/packages/main/test/pages/ListDragAndDrop.html)

1. If I drag "Spain" over the "Germany" and then drag "Spain" on the level of "Bulgaria" (revert nesting) the "Germany" is empty (as expected), but stays grey:
   

For the tab-container (http://localhost:8080/packages/main/test/pages/TabContainerDragAndDrop.html): 2. If I open the right overflow and try to move "Twenty Four" above "Twenty Three" I see the correct cursor (the hand) and the element becomes grey, but when I'm out of the elements boundaries it doesn't move

3. (Maybe related with the previous one?) When I drag "Fourteen" over "Thirteen" and nest it it works as expected. But if I try to move "Fourteen" back to its previous place I can't drag it (as described before - looks like it can be dragged, but it doesn't move):
   
   [update] I noticed that in this case if I start dragging over the padding (not the text) it works, but it is still strange user experience to not work if the element is grabbed in the center (over the text)
4. In tab-container .focus() after drop not always work well
5. There are differences with the design

5.1. The background of the dragged tab is transparent: design: implementation:
5.2. The circle of the needle is cut design: implementation:
5.3. When I start dragging element the colors and the focus is not as specified design: implementation:

1. Fixed
2. Issue that you can' drag the list items by their text, which in this case is slotted element - seems like bug or feature in Chromium based browsers. See https://issues.chromium.org/issues/328263459. I will wait to see if they will fix it, as there is no workaround I can think of at the moment
3. Same as 2.
4. Will be discussed (TODO)
5. 1. fixed
   2. fixed
   3. fixed

1. Text color is OK now, but the background of "Germany" stays grey (as it is hovered):

5. There are light grey vertical borders visible (for Horizon Light/Dark and Fiori 3 Light/Dark themes):

[dimovpetar]

I tested noticed the following:
For the list (http://localhost:8080/packages/main/test/pages/ListDragAndDrop.html)

1. If I drag "Spain" over the "Germany" and then drag "Spain" on the level of "Bulgaria" (revert nesting) the "Germany" is empty (as expected), but stays grey:
   

For the tab-container (http://localhost:8080/packages/main/test/pages/TabContainerDragAndDrop.html): 2. If I open the right overflow and try to move "Twenty Four" above "Twenty Three" I see the correct cursor (the hand) and the element becomes grey, but when I'm out of the elements boundaries it doesn't move

3. (Maybe related with the previous one?) When I drag "Fourteen" over "Thirteen" and nest it it works as expected. But if I try to move "Fourteen" back to its previous place I can't drag it (as described before - looks like it can be dragged, but it doesn't move):
   
   [update] I noticed that in this case if I start dragging over the padding (not the text) it works, but it is still strange user experience to not work if the element is grabbed in the center (over the text)
4. In tab-container .focus() after drop not always work well
5. There are differences with the design

5.1. The background of the dragged tab is transparent: design: implementation:
5.2. The circle of the needle is cut design: implementation:
5.3. When I start dragging element the colors and the focus is not as specified design: implementation:

1. Fixed
2. Issue that you can' drag the list items by their text, which in this case is slotted element - seems like bug or feature in Chromium based browsers. See https://issues.chromium.org/issues/328263459. I will wait to see if they will fix it, as there is no workaround I can think of at the moment
3. Same as 2.
4. Will be discussed (TODO)
5. 1. fixed
   2. fixed
   3. fixed

1. Text color is OK now, but the background of "Germany" stays grey (as it is hovered):

5. There are light grey vertical borders visible (for Horizon Light/Dark and Fiori 3 Light/Dark themes):

1. Looks like :hover pseud class remains active on the wrong element. Opened Chromium issue https://issues.chromium.org/issues/329096331. Anyways, this is not a real case, it it used only for testing in our internal test page
2. Fixed

[LidiyaGeorgieva]

+1
looks good to me