draggable-helper - npm Package Compare versions

Comparing version 6.0.1 to 6.0.2

package.json

 {
   "name": "draggable-helper",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "To simplify drag and drop.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/draggable-helper.cjs.js",
+  "module": "dist/draggable-helper.esm.js",
+  "types": "types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
@@ -25,5 +27,4 @@ "scripts": {
   "devDependencies": {
-    "@babel/preset-typescript": "^7.10.1",
-    "rogo": "^2.0.2",
-    "rollup-plugin-typescript2": "^0.27.1",
+    "@rollup-use/core": "^0",
+    "@rollup-use/ts": "^0",
     "typescript": "^3.9.5"
@@ -30,0 +31,0 @@ },

README.MD

@@ -1,23 +0,28 @@
-# Version 5 is written with Typescript, so you can try read code directly. Follow documentation is for version 4. The documentation for newest version 5 is being written...
+# draggable-helper
 
-# draggable-helper
-A js library to simplify your drag and drop functions. Start with a element, it will expose hooks(drag, moving, drop). You can stop drag, moving and drop by conditions. You can set minTranslate. Its code is easy, you can check source code.
+A js library to simplify your drag and drop functions. Start with a element, it will expose hooks(drag, moving, drop). You can stop drag, moving and drop by conditions. You can set minTranslate. It uses Typescript.
+
 ## features
-* support touch simplify(single touch)
-* to prevent page scrolling when touch
-* expose hooks(drag, moving, drop)
-* prevent drag and moving by return false in hook
-* set min translate to trigger drag
-* set the style of dragging element
-* set the class of dragging element
-* move the element or move a cloned one
-* check if event is triggered by mouse left button
-* to prevent text be selected when dragging
-* Advance usage: bind to parent element, make children element as trigger element or moved element. Check example.
 
+- support touch simplify(single touch)
+- to prevent page scrolling when touch
+- expose hooks(drag, moving, drop)
+- prevent drag and moving by return false in hook
+- set min translate to trigger drag
+- set the style of dragging element
+- set the class of dragging element
+- move the element or move a cloned one
+- check if event is triggered by mouse left button
+- to prevent text be selected when dragging
+- Advance usage: bind to parent element, make children element as trigger element or moved element. Check example.
+- Edge scroll. Auto scroll when drag to edge of another scrollable element.
+
 ## install
+
 ```sh
 npm install draggable-helper
 ```
+
 ## usage & api
+
 ```js
@@ -27,51 +32,99 @@ import draggableHelper from 'draggable-helper'
 const {destroy, options} = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})
-// opt
-// opt will pass to hook, so you can attach custom data into opt, such the data of the element
-// startEvent is mousedown or touchstart
-opt = {
-  // [Object] style, set the style of dragging element
-  // getStyle(store, opt), set the style of dragging element
-  // [String] draggingClass, default dragging, set the class of dragging element
-  // [Boolean] clone, move the element or move a cloned one
-  // minTranslate default 10, unit px
-  // getEl(dragHandlerEl, store, opt), optional, get the el that will be moved. default is dragHandlerEl
-  // afterGetEl(store, opt)
-  // [Boolean] triggerBySelf if trigger only by dragHandlerEl self, can not be triggered by children
-  // hook, before drag start
-  // [Boolean] opt.restoreDOMManuallyOndrop the changed DOM will be restored automatically on drop. This disable it and pass restoreDOM function into store.
-  beforeDrag(startEvent, moveEvent, store, opt){
-    // when trigger drag, the position must be moved, so there are two event. startEvent also can be accessed by store.startEvent
-    // The dragged element at this time has not yet been obtained, store.el is null. 此时要移动的元素还没有获得到, 即store.el是空.
-    // return false to prevent drag
-  },
-  // hook, when drag start
-  drag(startEvent, moveEvent, store, opt){
-    // when trigger drag, the position must be moved, so there are two event. startEvent also can be accessed by store.startEvent
-    // return false to prevent drag
-  },
-  // hook, when mouse moving
-  moving: (moveEvent, store, opt) => {
-    // return false to prevent moving
-  },
-  // hook, when drop
-  drop: (endEvent, store, opt) => {
-  },
+
+```
+
+## types
+
+```ts
+import { EventPosition, MouseOrTouchEvent } from "drag-event-service";
+export default function (
+  listenerElement: HTMLElement,
+  opt?: Options
+): {
+  destroy: () => void;
+  options: Options;
+};
+export declare const defaultOptions: {
+  ingoreTags: string[];
+  undraggableClassName: string;
+  minDisplacement: number;
+  draggingClassName: string;
+  clone: boolean;
+  updateMovedElementStyleManually: boolean;
+  preventTextSelection: boolean;
+  edgeScrollTriggerMargin: number;
+  edgeScrollSpeed: number;
+  edgeScrollTriggerMode: string;
+};
+export interface Options extends Partial<typeof defaultOptions> {
+  triggerClassName?: string | string[];
+  triggerBySelf?: boolean;
+  getTriggerElement?: (
+    directTriggerElement: HTMLElement,
+    store: Store
+  ) => HTMLElement | undefined;
+  getMovedOrClonedElement?: (
+    directTriggerElement: HTMLElement,
+    store: Store,
+    opt: Options
+  ) => HTMLElement;
+  beforeFirstMove?: (store: Store, opt: Options) => boolean | undefined;
+  afterFirstMove?: (store: Store, opt: Options) => void;
+  beforeMove?: (store: Store, opt: Options) => boolean | undefined;
+  afterMove?: (store: Store, opt: Options) => void;
+  beforeDrop?: (store: Store, opt: Options) => boolean | undefined;
+  afterDrop?: (store: Store, opt: Options) => void;
+  preventTextSelection?: boolean;
+  edgeScroll?: boolean;
+  edgeScrollTriggerMargin?: number;
+  edgeScrollSpeed?: number;
+  edgeScrollTriggerMode?: "top_left_corner" | "mouse";
+  edgeScrollSpecifiedContainerX?:
+    | HTMLElement
+    | ((store: Store, opt: Options) => HTMLElement);
+  edgeScrollSpecifiedContainerY?:
+    | HTMLElement
+    | ((store: Store, opt: Options) => HTMLElement);
+  onmousedown?: (e: MouseEvent) => void;
+  onmousemove?: (e: MouseEvent) => void;
+  onmouseup?: (e: MouseEvent) => void;
+  ontouchstart?: (e: TouchEvent) => void;
+  ontouchmove?: (e: TouchEvent) => void;
+  ontouchend?: (e: TouchEvent) => void;
+  onClone?: (store: Store, opt: Options) => boolean;
 }
-// store. life cycle: drag-end
-store = {
-  el // the moving el
-  originalEl // the original moving el, used when clone
-  initialMouse
-  initialPosition // relative to offsetParent
-  mouse
-  move
-  movedCount // start from 0
-  startEvent // mousedown or touchstart event
-  endEvent,
-  restoreDOM() // function if opt.restoreDOMManuallyOndrop else null
+export declare const initialStore: {
+  movedCount: number;
+};
+declare type InitialStore = typeof initialStore;
+export interface Store extends InitialStore {
+  listenerElement: HTMLElement;
+  directTriggerElement: HTMLElement;
+  triggerElement: HTMLElement;
+  startEvent: MouseOrTouchEvent;
+  moveEvent: MouseOrTouchEvent;
+  endEvent: MouseOrTouchEvent;
+  mouse: EventPosition;
+  initialMouse: EventPosition;
+  move: EventPosition2;
+  movedOrClonedElement: HTMLElement;
+  movedElement: HTMLElement;
+  initialPosition: EventPosition2;
+  initialPositionRelativeToViewport: EventPosition2;
+  updateMovedElementStyle: () => void;
+  _isMovingElementCloned: boolean;
 }
+declare type EventPosition2 = {
+  x: number;
+  y: number;
+};
+export {};
 ```
+
 ## Example
+
 ### Advance usage: bind to parent element
+
 Advance usage: bind to parent element, make children element as trigger element or moved element.
+
 ```js
@@ -90,12 +143,14 @@ import draggableHelper from 'draggable-helper'
 ```
+
 ## prevent drag
+
 In follow case, drag event will be prevented.
-* Event target element is follow
+
+- Event target element is follow
+
 ```js
-const IGNORE_TRIGGERS = ['INPUT','TEXTAREA', 'SELECT', 'OPTGROUP', 'OPTION']
+const IGNORE_TRIGGERS = ["INPUT", "TEXTAREA", "SELECT", "OPTGROUP", "OPTION"];
 ```
-* Event target has class `undraggable` or its ancestor till dragHandlerEl has.
-* opt.beforeDrag or opt.drag return false
 
-## demo
-[jsfiddle](https://jsfiddle.net/phphe/t694kpua/19/)
+- Event target has class `undraggable` or its ancestor till dragHandlerEl has.
+- opt.beforeDrag or opt.drag return false

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Improved metrics

Dev dependency count

3

decreased by-25%

Number of lines in readme file

155

increased by55%

Worsened metrics

Total package byte prevSize

138524

decreased by-12.2%

Number of package files

8

decreased by-27.27%

Lines of code

2876

decreased by-13.3%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes