-

yairEO · Sep 5, 2020 · 1494ad6 · 1494ad6
1 parent 42684bc
commit 1494ad6
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 15 deletions.
diff --git a/dist/dragsort.css b/dist/dragsort.css
diff --git a/dist/dragsort.js b/dist/dragsort.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@yaireo/dragsort",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "homepage": "https://github.com/yairEO/dragsort",
     "description": "Simple lisghtweight HTML5 drag-&-drop sorting ",
     "license": "MIT",
@@ -9,10 +9,10 @@
         "clean": "rm -rf dist",
         "makedir": "mkdirp dist",
         "js": "terser --compress --mangle --output dist/dragsort.js -- src/dragsort.js",
-        "js:watch": "onchange \"src/dragsort.js\" -- npm run js",
         "css": "cleancss --level=2 --output dist/dragsort.css src/dragsort.css",
-        "css:watch": "onchange \"src/dragsort.css\" -- npm run css",
-        "start": "npm run build && npm run js:watch & npm run css:watch"
+        "watch:js": "onchange \"src/dragsort.js\" -- npm run js",
+        "watch:css": "onchange \"src/dragsort.css\" -- npm run css",
+        "start": "npm run build && concurrently \"npm:watch:*\""
     },
     "_npmUser": {
         "name": "vsync",
@@ -33,6 +33,7 @@
     "devDependencies": {
         "autoprefixer": "^9.8.6",
         "clean-css-cli": "^4.3.0",
+        "concurrently": "^5.3.0",
         "mkdirp": "^1.0.4",
         "node-sass": "^4.14.1",
         "onchange": "^7.0.2",

diff --git a/src/dragsort.css b/src/dragsort.css
@@ -10,9 +10,9 @@
 .dragsort--dragStart .dragsort--hide {
     width: 0 !important;
     height: 0 !important;
-    padding: 0;
+    /* padding: 0;
     margin: 0;
-    border-width: 0;
+    border-width: 0; */
 }
 
 .dragsort--dragStart > *{

diff --git a/src/dragsort.js b/src/dragsort.js
@@ -82,20 +82,26 @@ var DragSort = (function (elm) {
         },
 
         dragstart(e, elm) {
-            _current = this;
-            var draggableElm = this.getDraggableElm(elm);
+            _current = this
+
+            var draggableElm = this.getDraggableElm(elm),
+                clientRect;
+
             if (!draggableElm) {
-                _current = {};
+                _current = {}
                 return
             }
 
             this.source = this.getInitialState()
             this.target = this.getInitialState()
 
+            clientRect = draggableElm.getBoundingClientRect() // more accurate than offsetWidth/offsetHeight (not rounded)
+
             this.source.elm = draggableElm
             this.source.idx = this.getNodeIndex(draggableElm)
-            this.source.size.width = draggableElm.offsetWidth //elm.getBoundingClientRect();
-            this.source.size.height = draggableElm.offsetHeight
+            this.source.size.width = clientRect.width
+            this.source.size.height = clientRect.height
+
             // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
             e.dataTransfer.effectAllowed = 'move'
 
@@ -104,10 +110,12 @@ var DragSort = (function (elm) {
         },
 
         afterDragStart() {
+            var prop = this.settings.mode == 'vertical' ? 'height' : 'width'
+
             this.parentElm.classList.add(`${this.namespace}--dragStart`)
 
             // hiding the source element with transition, the initial "width" is set to occupy the same space
-            this.source.elm.style.width = this.source.elm.clientWidth + 'px'
+            this.source.elm.style[prop] = this.source.size[prop] + 'px'
 
             this.source.elm.classList.add(`${this.namespace}--dragElem`)
         },