Repeatable structure elements turn blank when reordering.

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X EE, Master
• Fix Version/s: 7.0.0 DXP FP26, 7.0.X EE, 7.0.4 CE GA5, 7.1.X, Master
• Component/s: Dynamic Data Mapping > Form Builder
• Labels:
  • liferay-digital-enterprise-70-sp5
  • liferay-fixpack-de-26-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Git Pull Request: https://github.com/liferay/com-liferay-dynamic-data-mapping/pull/301

Steps

1. Start DXP and go to Web Content in the Control Panel for the default site.
2. Create a structure with a repeatable element 
3. Create a template for the structure created in #2
4. Go to Web Content section and try to add a web content using the template created in #3
5. Click '+' icon to add a repeated element
6. Try to drag one of the repeated elements by clicking and drag it to other location
7. Observe that it loses the content of the element and it's almost impossible to find a target location for the element to be placed onto

Expected: It would be possible to move the element to the desired location easily because:
The content of the elements would remain visible
Dragging the element around the page would be more controlled and user friendly so that it could be re-positioned.
Actual: It is almost impossible to move the element to the desired location because:
The content of the element becomes blank which makes it very hard to know where in the article you are dragging the element to.
When dragging the element around the page, it is very jerky and hard to see where you are, making it very tricky to find the right place.