sortable-dnd - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/sortable.js

 /*!
- * sortable-dnd v0.0.5
+ * sortable-dnd v0.0.6
  * open source under the MIT license
@@ -280,2 +280,3 @@ * https://github.com/mfuu/sortable-dnd#readme
         this.$el = el;
+        this.rect = rect;
         var _this$options = this.options,
@@ -478,4 +479,3 @@ ghostClass = _this$options.ghostClass,
         if (!el || index < 0) return;
-        var groupRect = this.group.getBoundingClientRect();
-        if (top - groupRect.top < 0 || left - groupRect.left < 0) return;
+        if (top < 0 || top - this.ghost.rect.height / 3 < 0) return;
 
@@ -482,0 +482,0 @@ if (e.clientX > left && e.clientX < right && e.clientY > top && e.clientY < bottom) {

dist/sortable.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).sortable=e()}(this,function(){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t,e,n){e&&i(t.prototype,e),n&&i(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function s(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var l=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),u={capture:!1,passive:!1},a={on:function(t,e,n){t.addEventListener(e,n,!l&&u)},off:function(t,e,n){t.removeEventListener(e,n,!l&&u)},getWindowScrollingElement:function(){var t=document.scrollingElement;return t||document.documentElement},index:function(t,e){return e&&e.parentNode?s(Array.from(t.children)).indexOf(e):-1},getRect:function(t,e){return!t.length||e<0?{}:t[e].getBoundingClientRect()},getElement:function(t,e){var n={index:-1,el:null,rect:{}},i=s(Array.from(t.children)),t=i.indexOf(e);-1<t&&Object.assign(n,{index:t,el:i[t],rect:i[t].getBoundingClientRect()});for(var o=0;o<i.length;o++)this.isChildOf(e,i[o])&&Object.assign(n,{index:o,el:i[o],rect:i[o].getBoundingClientRect()});return n},isChildOf:function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return!0;n=n.parentNode}return!1},animate:function(t,e){var n=this,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,o=t.getBoundingClientRect(),s=e.left-o.left,e=e.top-o.top;this.css(t,"transition","none"),this.css(t,"transform","translate3d(".concat(s,"px, ").concat(e,"px, 0)")),t.offsetLeft,this.css(t,"transition","all ".concat(i,"ms")),this.css(t,"transform","translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){n.css(t,"transition",""),n.css(t,"transform",""),t.animated=null},i)},css:function(t,e,n){var i=t&&t.style;if(i){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];i[e=e in i||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}},debounce:function(o,s){return function(){for(var t=this,e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];clearTimeout(o.id),o.id=setTimeout(function(){o.call.apply(o,[t].concat(n))},s)}}},d=function(){function t(){n(this,t),this.old={node:null,rect:{}},this.new={node:null,rect:{}}}return o(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.old={node:null,rect:{}},this.new={node:null,rect:{}}}}]),t}(),c=function(){function e(t){n(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return o(e,[{key:"init",value:function(t,e){if(t){this.$el=t;var n,t=this.options,i=t.ghostClass,t=t.ghostStyle,o=void 0===t?{}:t,t=e.width,e=e.height;for(n in this.$el.class=i,this.$el.style.width=t+"px",this.$el.style.height=e+"px",this.$el.style.transform="",this.$el.style.transition="",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",o)a.css(this.$el,n,o[n])}else console.error("Ghost Element is required")}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"move",value:function(){this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)")}},{key:"destroy",value:function(){this.$el&&this.$el.remove(),this.exist=!1}}]),e}();return function(){function e(t){n(this,e),this.group=t.group,this.dragging=t.dragging,this.dragEnd=t.dragEnd,this.ghostStyle=t.ghostStyle,this.ghostClass=t.ghostClass,this.animation=t.animation||300,this.isMousedown=!1,this.isMousemove=!1,this.dragEl=null,this.dropEl=null,this.diff=new d,this.ghost=new c({ghostClass:this.ghostClass,ghostStyle:this.ghostStyle}),this.supportPointer="PointerEvent"in window&&!h,this.calcXY={x:0,y:0},a.debounce(this.init(),50)}return o(e,[{key:"init",value:function(){this.group?this._bindEventListener():console.error("Error: group is required")}},{key:"destroy",value:function(){this._unbindEventListener(),this._resetState()}},{key:"_onStart",value:function(t){if(0!==t.button)return!0;if(t.target===this.group)return!0;try{var e=this.dragging?this.dragging(t):t.target;if(!e)return!0;if(e.animated)return;this.dragEl=e}catch(t){return!0}this.isMousedown=!0;var e=a.getElement(this.group,this.dragEl),n=e.index,i=e.el,e=e.rect;if(!i||n<0)return!0;i=this.dragEl.cloneNode(!0);this.ghost.init(i,e),this.diff.old.rect=e,this.ghost.set("x",e.left),this.ghost.set("y",e.top),this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(),this._onUpEvents()}},{key:"_onMove",value:function(t){if(this.ghost.move(),t.preventDefault(),this.isMousedown&&!(t.clientX<0||t.clientY<0)){document.body.style.cursor="grabbing",this.isMousemove=!0,this.ghost.set("x",this.ghost.x+t.clientX-this.calcXY.x),this.ghost.set("y",this.ghost.y+t.clientY-this.calcXY.y),this.calcXY={x:t.clientX,y:t.clientY},this.ghost.move(),this._checkRange(t);var e=a.getElement(this.group,t.target),n=e.index,i=e.el,e=e.rect,o=e.left,s=e.right,r=e.top,e=e.bottom;if(i&&!(n<0)){var l=this.group.getBoundingClientRect();if(!(r-l.top<0||o-l.left<0)&&t.clientX>o&&t.clientX<s&&t.clientY>r&&t.clientY<e){if(this.dropEl=i,this.dropEl!==this.dragEl){l=this.dragEl.getBoundingClientRect(),o=this.dropEl.getBoundingClientRect();if(this.dropEl.animated)return;a.index(this.group,this.dragEl)<n?this.group.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.group.insertBefore(this.dragEl,this.dropEl),a.animate(this.dragEl,l,this.animation),a.animate(this.dropEl,o,this.animation),this.diff.old.node=this.dragEl,this.diff.new.node=this.dropEl}this.diff.new.rect=this.dropEl.getBoundingClientRect()}}}}},{key:"_onDrop",value:function(){this._offMoveEvents(),this._offUpEvents(),document.body.style.cursor="",this.isMousedown&&this.isMousemove&&this.dragEnd&&"function"==typeof this.dragEnd&&this.dragEnd(this.diff.old,this.diff.new),this.isMousedown=!1,this.isMousemove=!1,this.diff.destroy(),this.ghost.destroy()}},{key:"_checkRange",value:function(t){var e=this.group.getBoundingClientRect(),n=e.top,i=e.left,o=e.right,e=e.bottom;(t.clientX<i||t.clientX>o||t.clientY<n||t.clientY>e)&&(document.body.style.cursor="not-allowed")}},{key:"_resetState",value:function(){this.isMousedown=!1,this.isMousemove=!1,this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.diff=new d}},{key:"_bindEventListener",value:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this.supportPointer?a.on(this.group,"pointerdown",this._onStart):a.on(this.group,"mousedown",this._onStart)}},{key:"_onMoveEvents",value:function(){this.supportPointer?a.on(document,"pointermove",this._onMove):a.on(document,"mousemove",this._onMove)}},{key:"_onUpEvents",value:function(){this.supportPointer?a.on(document,"pointerup",this._onDrop):a.on(document,"mouseup",this._onDrop)}},{key:"_unbindEventListener",value:function(){a.off(this.group,"mousedown",this._onStart),a.off(this.group,"pointerdown",this._onStart)}},{key:"_offMoveEvents",value:function(){a.off(document,"mousemove",this._onMove),a.off(document,"pointermove",this._onMove)}},{key:"_offUpEvents",value:function(){a.off(document,"mouseup",this._onDrop),a.off(document,"pointerup",this._onDrop)}}]),e}()});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).sortable=e()}(this,function(){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t,e,n){e&&i(t.prototype,e),n&&i(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function s(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var l=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),u={capture:!1,passive:!1},a={on:function(t,e,n){t.addEventListener(e,n,!l&&u)},off:function(t,e,n){t.removeEventListener(e,n,!l&&u)},getWindowScrollingElement:function(){var t=document.scrollingElement;return t||document.documentElement},index:function(t,e){return e&&e.parentNode?s(Array.from(t.children)).indexOf(e):-1},getRect:function(t,e){return!t.length||e<0?{}:t[e].getBoundingClientRect()},getElement:function(t,e){var n={index:-1,el:null,rect:{}},i=s(Array.from(t.children)),t=i.indexOf(e);-1<t&&Object.assign(n,{index:t,el:i[t],rect:i[t].getBoundingClientRect()});for(var o=0;o<i.length;o++)this.isChildOf(e,i[o])&&Object.assign(n,{index:o,el:i[o],rect:i[o].getBoundingClientRect()});return n},isChildOf:function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return!0;n=n.parentNode}return!1},animate:function(t,e){var n=this,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:300,o=t.getBoundingClientRect(),s=e.left-o.left,e=e.top-o.top;this.css(t,"transition","none"),this.css(t,"transform","translate3d(".concat(s,"px, ").concat(e,"px, 0)")),t.offsetLeft,this.css(t,"transition","all ".concat(i,"ms")),this.css(t,"transform","translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){n.css(t,"transition",""),n.css(t,"transform",""),t.animated=null},i)},css:function(t,e,n){var i=t&&t.style;if(i){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];i[e=e in i||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}},debounce:function(o,s){return function(){for(var t=this,e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];clearTimeout(o.id),o.id=setTimeout(function(){o.call.apply(o,[t].concat(n))},s)}}},d=function(){function t(){n(this,t),this.old={node:null,rect:{}},this.new={node:null,rect:{}}}return o(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.old={node:null,rect:{}},this.new={node:null,rect:{}}}}]),t}(),c=function(){function e(t){n(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return o(e,[{key:"init",value:function(t,e){if(t){this.$el=t,this.rect=e;var n,t=this.options,i=t.ghostClass,t=t.ghostStyle,o=void 0===t?{}:t,t=e.width,e=e.height;for(n in this.$el.class=i,this.$el.style.width=t+"px",this.$el.style.height=e+"px",this.$el.style.transform="",this.$el.style.transition="",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",o)a.css(this.$el,n,o[n])}else console.error("Ghost Element is required")}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"move",value:function(){this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)")}},{key:"destroy",value:function(){this.$el&&this.$el.remove(),this.exist=!1}}]),e}();return function(){function e(t){n(this,e),this.group=t.group,this.dragging=t.dragging,this.dragEnd=t.dragEnd,this.ghostStyle=t.ghostStyle,this.ghostClass=t.ghostClass,this.animation=t.animation||300,this.isMousedown=!1,this.isMousemove=!1,this.dragEl=null,this.dropEl=null,this.diff=new d,this.ghost=new c({ghostClass:this.ghostClass,ghostStyle:this.ghostStyle}),this.supportPointer="PointerEvent"in window&&!h,this.calcXY={x:0,y:0},a.debounce(this.init(),50)}return o(e,[{key:"init",value:function(){this.group?this._bindEventListener():console.error("Error: group is required")}},{key:"destroy",value:function(){this._unbindEventListener(),this._resetState()}},{key:"_onStart",value:function(t){if(0!==t.button)return!0;if(t.target===this.group)return!0;try{var e=this.dragging?this.dragging(t):t.target;if(!e)return!0;if(e.animated)return;this.dragEl=e}catch(t){return!0}this.isMousedown=!0;var e=a.getElement(this.group,this.dragEl),n=e.index,i=e.el,e=e.rect;if(!i||n<0)return!0;i=this.dragEl.cloneNode(!0);this.ghost.init(i,e),this.diff.old.rect=e,this.ghost.set("x",e.left),this.ghost.set("y",e.top),this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(),this._onUpEvents()}},{key:"_onMove",value:function(t){if(this.ghost.move(),t.preventDefault(),this.isMousedown&&!(t.clientX<0||t.clientY<0)){document.body.style.cursor="grabbing",this.isMousemove=!0,this.ghost.set("x",this.ghost.x+t.clientX-this.calcXY.x),this.ghost.set("y",this.ghost.y+t.clientY-this.calcXY.y),this.calcXY={x:t.clientX,y:t.clientY},this.ghost.move(),this._checkRange(t);var e=a.getElement(this.group,t.target),n=e.index,i=e.el,e=e.rect,o=e.left,s=e.right,r=e.top,e=e.bottom;if(i&&!(n<0)&&!(r<0||r-this.ghost.rect.height/3<0)&&t.clientX>o&&t.clientX<s&&t.clientY>r&&t.clientY<e){if(this.dropEl=i,this.dropEl!==this.dragEl){o=this.dragEl.getBoundingClientRect(),s=this.dropEl.getBoundingClientRect();if(this.dropEl.animated)return;a.index(this.group,this.dragEl)<n?this.group.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.group.insertBefore(this.dragEl,this.dropEl),a.animate(this.dragEl,o,this.animation),a.animate(this.dropEl,s,this.animation),this.diff.old.node=this.dragEl,this.diff.new.node=this.dropEl}this.diff.new.rect=this.dropEl.getBoundingClientRect()}}}},{key:"_onDrop",value:function(){this._offMoveEvents(),this._offUpEvents(),document.body.style.cursor="",this.isMousedown&&this.isMousemove&&this.dragEnd&&"function"==typeof this.dragEnd&&this.dragEnd(this.diff.old,this.diff.new),this.isMousedown=!1,this.isMousemove=!1,this.diff.destroy(),this.ghost.destroy()}},{key:"_checkRange",value:function(t){var e=this.group.getBoundingClientRect(),n=e.top,i=e.left,o=e.right,e=e.bottom;(t.clientX<i||t.clientX>o||t.clientY<n||t.clientY>e)&&(document.body.style.cursor="not-allowed")}},{key:"_resetState",value:function(){this.isMousedown=!1,this.isMousemove=!1,this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.diff=new d}},{key:"_bindEventListener",value:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this.supportPointer?a.on(this.group,"pointerdown",this._onStart):a.on(this.group,"mousedown",this._onStart)}},{key:"_onMoveEvents",value:function(){this.supportPointer?a.on(document,"pointermove",this._onMove):a.on(document,"mousemove",this._onMove)}},{key:"_onUpEvents",value:function(){this.supportPointer?a.on(document,"pointerup",this._onDrop):a.on(document,"mouseup",this._onDrop)}},{key:"_unbindEventListener",value:function(){a.off(this.group,"mousedown",this._onStart),a.off(this.group,"pointerdown",this._onStart)}},{key:"_offMoveEvents",value:function(){a.off(document,"mousemove",this._onMove),a.off(document,"pointermove",this._onMove)}},{key:"_offUpEvents",value:function(){a.off(document,"mouseup",this._onDrop),a.off(document,"pointerup",this._onDrop)}}]),e}()});

package.json

 {
   "name": "sortable-dnd",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "JS Library for Drag and Drop, supports Sortable and Draggable",
@@ -5,0 +5,0 @@ "main": "dist/sortable.js",

src/constructors.js

@@ -45,2 +45,3 @@ import utils from "./utils.js"
     this.$el = el
+    this.rect = rect
     const { ghostClass, ghostStyle = {} } = this.options
@@ -47,0 +48,0 @@ const { width, height } = rect

src/index.js

@@ -126,6 +126,4 @@ import utils from './utils.js'
 
-    const groupRect = this.group.getBoundingClientRect()
+    if (top < 0 || top - (this.ghost.rect.height / 3) < 0) return
 
-    if (top - groupRect.top < 0 || left - groupRect.left < 0) return
-
     if (e.clientX > left && e.clientX < right && e.clientY > top && e.clientY < bottom) {
@@ -132,0 +130,0 @@ this.dropEl = el

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

42244

decreased by-0.24%

No dependency changes