Afform - Improve dragging into dropzones

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
index f99ca046899b34f1f56069a344d376ee7a60afe3..e7c010e10a9583bb1fd4b1bca5977267290109b8 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
@@ -370,15 +370,17 @@
       this.getSortableOptions = function(entityName) {
         if (!sortableOptions[entityName + '']) {
           sortableOptions[entityName + ''] = {
-            helper: 'clone',
             appendTo: '#afGuiEditor-canvas-body > af-gui-container',
             containment: '#afGuiEditor-canvas-body',
             update: editor.onDrop,
             items: '> div:not(.disabled)',
             connectWith: '#afGuiEditor-canvas ' + (entityName ? '[data-entity="' + entityName + '"] > ' : '') + '[ui-sortable]',
             placeholder: 'af-gui-dropzone',
-            tolerance: 'pointer',
-            scrollSpeed: 8
+            scrollSpeed: 8,
+            helper: function(e, $el) {
+              // Prevent draggable item from being too large for the drop zones.
+              return $el.clone().css({width: '50px', height: '20px'});
+            }
           };
         }
         return sortableOptions[entityName + ''];

diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
index 4942691352e807a2b9efe25e5c1eb63d4091404e..c59cc898ca0303a38aae1f61b76899e7df4c2364 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
@@ -46,9 +46,12 @@
         connectWith: '[ui-sortable]',
         cancel: 'input,textarea,button,select,option,a,.dropdown-menu',
         placeholder: 'af-gui-dropzone',
-        tolerance: 'pointer',
         scrollSpeed: 8,
-        containment: '#afGuiEditor-canvas-body'
+        containment: '#afGuiEditor-canvas-body',
+        helper: function(e, $el) {
+          // Prevent draggable item from being too large for the drop zones.
+          return $el.clone().css({width: '50px', height: '20px'});
+        }
       };
 
       $scope.isSelectedFieldset = function(entityName) {