CSS display: block !important breaks dragging

[pdmccormick]

Issue

Using the !important modifier on the display property causes items to be stuck in place and unable to be moved. This comes up, for example, when using Bootstrap 4 and the d-flex class, which contains the property display: flex !important.

This is because getElementBehindPoint uses the gu-hide class to momentarily hide an element (which at the start of a drag is the mirror element), which itself uses display: none !important.

When the element is not properly hidden first, getElementBehindPoint winds up returning the same element, which in the mirror element case leads to the drop target being considered to be the body element, which causes drag to bail early since the body is outside the container, making the dragged element appear to be stuck in its original location.

Example

In the following example, the items in black can be freely moved and reordered, while the items in red (which have styling display: block !important via a named class) are stuck in place. This patch applies against the current index.html:

index 5830c71..29e05c4 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,15 @@
   <div class='parent'>
     <label for='hy'>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>
     <div class='wrapper'>
+      <style>
+      .display-block-important {
+        display: block !important;
+        color: red;
+      }
+      </style>
       <div id='left-defaults' class='container'>
-        <div>You can move these elements between these two containers</div>
-        <div>Moving them anywhere else isn't quite possible</div>
+        <div class='display-block-important'>You can move these elements between these two containers</div>
+        <div class='dispay-block-important'>Moving them anywhere else isn't quite possible</div>
         <div>Anything can be moved around. That includes images, <a href='https://github.com/bevacqua/dragula'>links</a>, or any other nested elements.
         <div class='image-thing'><img src='resources/icon.svg' onerror='this.src="resources/icon.png"' alt='dragula'/></div><sub>(You can still click on links, as usual!)</sub>
         </div>

Proposed solution

Modify getElementBehindPoint to use the CSS visibility property to temporarily hide an element instead of relying on the gu-hide class. This should not affect any of the user-defined styling needs, as this is simply an internal mechanism used to identify what is behind the clicked element.

index 67b9381..49176dd 100644
--- a/dist/dragula.js
+++ b/dist/dragula.js
@@ -584,12 +584,12 @@ function getScroll (scrollProp, offsetProp) {
 }
 
 function getElementBehindPoint (point, x, y) {
-  var p = point || {};
-  var state = p.className;
+  var p = point || { style: {} };
+  var state = p.style.visibility;
   var el;
-  p.className += ' gu-hide';
+  p.style.visibility = 'hidden';
   el = doc.elementFromPoint(x, y);
-  p.className = state;
+  p.style.visibility = state;
   return el;
 }
 

[thenitai]

After hours of searching I've found this fix. Other instances of Dragula on the same page worked but not another one. Was exactly the issue with the CSS. Shame that it's still not in the dist :(