MAGETWO-91375: Refactor drag & drop code

- Fix some issues with buttons

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ButtonActionGroup.xml

@@ -25,6 +25,7 @@
             <expectedResult type="variable">initialNumberOfButtonsPlusOne</expectedResult>
             <actualResult type="variable">numberOfButtonsAfterAdd</actualResult>
         </assertEquals>
+        <click selector="{{PageBuilderActionsSection.searchPanel}}" stepKey="unfocusButtonLiveEdit"/>
     </actionGroup>
     <actionGroup name="validateButtonItemContent">
         <arguments>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/buttons/_default.less

@@ -12,7 +12,11 @@
 
     .pagebuilder-content-type-wrapper {
         display: inline-block;
-        vertical-align: baseline;
+        vertical-align: middle;
         width: initial;
     }
+
+    > .element-children {
+        width: 100%;
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/preview.html

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
-    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: { tolerance: 'pointer', handle: '.move-structural', items: '.pagebuilder-content-type-wrapper', connectWith: '.buttons-container', forceRefresh: true }">
+    <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: { handle: '.move-structural', items: '.pagebuilder-content-type-wrapper', connectWith: '.buttons-container', appendTo: 'body' }">
         <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview }" attr="{ id: id }"></div>
     </div>
 </div>