From b2b28180d2b0ecd76c24a8bd6453e9a1bbd78d7f Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 6 Oct 2021 13:42:27 -0400
Subject: [PATCH] Afform - ensure dragging classes are removed when not sorting

---
 ext/afform/admin/ang/afGuiEditor.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js
index 3ecfdeadc2bd..69d0525d5918 100644
--- a/ext/afform/admin/ang/afGuiEditor.js
+++ b/ext/afform/admin/ang/afGuiEditor.js
@@ -182,17 +182,22 @@
     });
     // Add css class while dragging
     $(document)
+      // When dragging an item over a container, add a class to highlight the target
       .on('sortover', function(e) {
         $('.af-gui-container').removeClass('af-gui-dragtarget');
         $(e.target).closest('.af-gui-container').addClass('af-gui-dragtarget');
       })
+      // Un-highlight when dragging out of a container
       .on('sortout', '.af-gui-container', function() {
         $(this).removeClass('af-gui-dragtarget');
       })
+      // Add body class which puts the entire UI into a "dragging" state
       .on('sortstart', '#afGuiEditor', function() {
         $('body').addClass('af-gui-dragging');
       })
-      .on('sortstop', function() {
+      // Ensure dragging classes are removed when not sorting
+      // Listening to multiple event types because sort* events are not 100% reliable
+      .on('sortbeforestop mouseenter', function(e) {
         $('body').removeClass('af-gui-dragging');
         $('.af-gui-dragtarget').removeClass('af-gui-dragtarget');
       });