From ad00103f246fd0cd1c239abdf78b86dddb1afd3c Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 18 Apr 2022 15:42:16 -0400
Subject: [PATCH] Afform - Improve dragging into dropzones

---
 ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js | 8 +++++---
 .../ang/afGuiEditor/elements/afGuiContainer.component.js  | 7 +++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
index f99ca04689..e7c010e10a 100644
--- 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 4942691352..c59cc898ca 100644
--- 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) {
-- 
2.25.1