- take parent gap style into account when container is a flexbox

- more strict hiding styles for the dragged item
yairEO · Apr 22, 2022 · a769a4f · a769a4f
1 parent 9fe41b6
commit a769a4f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/dist/dragsort.css b/dist/dragsort.css
diff --git a/dist/dragsort.js b/dist/dragsort.js
diff --git a/src/dragsort.css b/src/dragsort.css
@@ -10,13 +10,13 @@
 .dragsort--dragStart .dragsort--hide {
     width: 0 !important;
     height: 0 !important;
-    /* padding: 0;
-    margin: 0;
-    border-width: 0; */
+    padding: 0 !important;
+    margin: 0 !important;
+    border-width: 0 !important;
 }
 
 .dragsort--dragStart > *{
-    transition: .18s cubic-bezier(.6, .1, .4, 1.2);
+    transition: var(--dragsort-trans-dur, .18s) cubic-bezier(.6, .1, .4, 1.2);
 }
 
 .dragsort--dragStart > * > *{

diff --git a/src/dragsort.js b/src/dragsort.js
@@ -275,10 +275,14 @@
         },
 
         getItemsGap(elm) {
-            var styles = getComputedStyle(elm);
-            return this.settings.mode == 'vertical' ?
-                parseInt(styles.marginTop) + parseInt(styles.marginBottom) :
-                parseInt(styles.marginLeft) + parseInt(styles.marginRight)
+            var itemStyles = getComputedStyle(elm),
+                parentStyles = getComputedStyle(elm.parentNode),
+                v = this.settings.mode == 'vertical',
+                gap = parseInt(parentStyles.gap) || 0, // parent might be a flexbox witha a gap
+                marginGap = parseInt(itemStyles[`margin${v ? 'Top' : 'Left'}`]) +
+                            parseInt(itemStyles[`margin${v ? 'Bottom' : 'Right'}`])
+
+            return marginGap + gap;
         },
 
         bindEvents(unbind) {

diff --git a/test/test.html b/test/test.html
@@ -52,15 +52,18 @@ <h2>Horizontal Tags - Varying Widths</h2>
 }
 
 .list {
+  --gap: 1vw;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  padding: var(--gap);
+
   width: 100%;
   max-width: 600px;
   margin: 2rem auto;
-  padding: 0;
   list-style-type: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  user-select: none;
   overflow: hidden;
 }
 
@@ -93,11 +96,14 @@ <h2>Horizontal Tags - Varying Widths</h2>
   font-weight: bold;
   border-radius: 20px;
   padding: 0.3em 0.5em;
-  margin: 5px 0 5px 5px;
   white-space: nowrap;
   box-sizing: border-box;
   overflow: hidden;
 }
+
+.card.dragsort--hide {
+  margin: 0 calc(var(--gap)/2 * -1);
+}
 </style>
 <script>
   DragSort( document.querySelector('.list') )