From 261a6a5dc45d142e422dda67c2f56dcb11d939b4 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 10 May 2021 08:53:52 -0400
Subject: [PATCH] Afform - Drag & drop fixes

The drag-drop validation broke when af-gui-field was changed from a directive to
a component, as the jQuery was looking for the wrong markup.

Additionally, this attempts to fix a hard-to-reproduce bug where the styling
gets stuck in a "dragging" state after something has been dropped.
---
 ext/afform/admin/ang/afGuiEditor.js                       | 4 ++--
 ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js
index a545b6ba29ea..406906a5c1a0 100644
--- a/ext/afform/admin/ang/afGuiEditor.js
+++ b/ext/afform/admin/ang/afGuiEditor.js
@@ -181,7 +181,7 @@
       $('#af-gui-icon-picker').crmIconPicker();
     });
     // Add css class while dragging
-    $('#crm-container')
+    $(document)
       .on('sortover', function(e) {
         $('.af-gui-container').removeClass('af-gui-dragtarget');
         $(e.target).closest('.af-gui-container').addClass('af-gui-dragtarget');
@@ -192,7 +192,7 @@
       .on('sortstart', '#afGuiEditor', function() {
         $('#afGuiEditor').addClass('af-gui-dragging');
       })
-      .on('sortstop', '#afGuiEditor', function() {
+      .on('sortstop', function() {
         $('.af-gui-dragging').removeClass('af-gui-dragging');
         $('.af-gui-dragtarget').removeClass('af-gui-dragtarget');
       });
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
index 112ef9bf0171..acbf3e23db97 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js
@@ -238,13 +238,13 @@
             $target = $(sort.droptarget[0]),
             $item = $(ui.item[0]);
           // Fields cannot be dropped outside their own entity
-          if ($item.is('[af-gui-field]') || $item.has('[af-gui-field]').length) {
+          if ($item.find('af-gui-field').length) {
             if ($source.closest('[data-entity]').attr('data-entity') !== $target.closest('[data-entity]').attr('data-entity')) {
               return sort.cancel();
             }
           }
           // Entity-fieldsets cannot be dropped into other entity-fieldsets
-          if ((sort.model['af-fieldset'] || $item.has('.af-gui-fieldset').length) && $target.closest('.af-gui-fieldset').length) {
+          if ((sort.model['af-fieldset'] || $item.find('.af-gui-fieldset').length) && $target.closest('.af-gui-fieldset').length) {
             return sort.cancel();
           }
         }