uiik 1.3.0-beta.2 → 1.3.0-beta.4

package/CHANGELOG.md

@@ -7,7 +7,12 @@
 ### 新增
 - handle 属性变更，支持更多类型
 - onPointerDown 事件，可用于阻止后续逻辑
-- draggable watch参数，可用于dom变动自动检测 
+- Draggable watch参数，可用于dom变动自动检测
+- Draggable self参数，仅自身元素响应时触发
+- Droppable watch参数，可用于dom变动自动检测
+- Uiik mouseButton参数，可指定鼠标响应按钮
+### 修复
+- Droppable 元素同时为Draggable时会自己触发Droppable事件
 
 ## [1.2.0] - 2023/9/3
 ### Add

package/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.0-beta.2
+ * uiik v1.3.0-beta.4
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
@@ -9,6 +9,7 @@ import { find, map, toArray, each, reject, includes, some, flatMap, size } from
 import { get, assign, merge } from 'myfx/object';
 import { split, test } from 'myfx/string';
 import { compact, findIndex } from 'myfx/array';
+import { closest } from 'myfx/tree';
 import { alphaId } from 'myfx/utils';
 
 /******************************************************************************
@@ -284,41 +285,59 @@ function getStyleSize(el, cStyle) {
     const h = parseFloat(cStyle.height);
     return { w, h };
 }
-const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
-function getMatrixInfo(elCStyle) {
-    let a = 1, b = 0, x = 0, y = 0;
-    let e = undefined, f = undefined;
-    if (elCStyle instanceof SVGGraphicsElement) {
-        const transMatrix = elCStyle.transform.animVal[0];
-        if (transMatrix) {
-            e = transMatrix.matrix.e;
-            f = transMatrix.matrix.f;
+const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<e>[\d.-]+)\s*,\s*(?<f>[\d.-]+)\s*\)/;
+function getMatrixInfo(el, recur = false) {
+    const rs = _getMatrixInfo(el);
+    if (recur) {
+        let p = el.parentElement;
+        while (p && p.tagName !== "BODY") {
+            let prs = _getMatrixInfo(p);
+            rs.scale *= prs.scale;
+            p = p.parentElement;
         }
-        elCStyle = window.getComputedStyle(elCStyle);
     }
-    else {
-        if (elCStyle instanceof HTMLElement) {
-            elCStyle = window.getComputedStyle(elCStyle);
-        }
-    }
-    const matched = elCStyle.transform.match(EXP_MATRIX);
-    if (matched && matched.groups) {
-        a = parseFloat(matched.groups.a);
-        b = parseFloat(matched.groups.b);
-        parseFloat(matched.groups.c);
-        parseFloat(matched.groups.d);
-        x = parseFloat(matched.groups.x);
-        y = parseFloat(matched.groups.y);
+    return rs;
+}
+function _getMatrixInfo(el) {
+    const rs = { scale: 1, angle: 0, x: 0, y: 0 };
+    let a = 1, b = 0;
+    let elCStyle;
+    if (el instanceof SVGGraphicsElement || el instanceof HTMLElement) {
+        elCStyle = window.getComputedStyle(el);
     }
-    if (e && f) {
-        x = e;
-        y = f;
+    let matrix = _getMatrix(elCStyle.transform);
+    if (matrix) {
+        a = matrix.a;
+        b = matrix.b;
+        matrix.c;
+        matrix.d;
+        rs.x = matrix.e;
+        rs.y = matrix.f;
     }
-    const rs = { scale: 1, angle: 0, x, y };
     rs.scale = Math.sqrt(a * a + b * b);
     rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
     return rs;
 }
+function _getMatrix(transform) {
+    let matrix = null;
+    if (window.WebKitCSSMatrix) {
+        matrix = new WebKitCSSMatrix(transform);
+    }
+    else {
+        const matched = transform.match(EXP_MATRIX);
+        if (matched && matched.groups) {
+            matrix = {
+                a: parseFloat(matched.groups.a),
+                b: parseFloat(matched.groups.b),
+                c: parseFloat(matched.groups.c),
+                d: parseFloat(matched.groups.d),
+                e: parseFloat(matched.groups.e),
+                f: parseFloat(matched.groups.f),
+            };
+        }
+    }
+    return matrix;
+}
 function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
     if (!elRect) {
         elRect = el.getBoundingClientRect();
@@ -327,7 +346,7 @@ function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
         elCStyle = window.getComputedStyle(el);
     }
     if (!matrixInfo) {
-        matrixInfo = getMatrixInfo(elCStyle);
+        matrixInfo = getMatrixInfo(el, true);
     }
     const scale = matrixInfo.scale;
     let x = event.clientX -
@@ -344,7 +363,7 @@ function getRectInContainer(el, container) {
     const elRect = el.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
     const elCStyle = window.getComputedStyle(container);
-    const matrixInfo = getMatrixInfo(elCStyle);
+    const matrixInfo = getMatrixInfo(container);
     const scale = matrixInfo.scale;
     let x = elRect.x -
         containerRect.x -
@@ -389,7 +408,7 @@ function getVertex(el, ox, oy) {
     const h = parseFloat(cStyle.height);
     const { originX, originY } = parseOxy(ox, oy, w, h);
     const { x, y, sx, sy } = el instanceof SVGGraphicsElement ? getCenterXySVG(el, originX, originY) : getCenterXy(el);
-    const { angle } = getMatrixInfo(cStyle);
+    const { angle } = getMatrixInfo(el);
     return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
 }
 function calcVertex(w, h, cx, cy, sx, sy, radian) {
@@ -430,6 +449,7 @@ class Uii {
         this.enabled = true;
         _Uii_listeners.set(this, []);
         this.opts = opts || {};
+        this.opts.mouseButton = this.opts.mouseButton || 'left';
         if (isArrayLike(ele) && !isString(ele)) {
             this.ele = map(ele, (el) => {
                 let e = isString(el) ? document.querySelector(el) : el;
@@ -449,7 +469,9 @@ class Uii {
                 console.error('Invalid element "' + ele + '"');
                 return;
             }
-            this.ele = isArrayLike(el) ? toArray(el) : [el];
+            this.ele = isArrayLike(el)
+                ? toArray(el)
+                : [el];
         }
     }
     destroy() {
@@ -463,11 +485,23 @@ class Uii {
         const threshold = opts.threshold || 0;
         const toLockPage = opts.lockPage || false;
         const uiiOptions = this.opts;
-        this.registerEvent(el, 'mousedown', (e) => {
+        this.registerEvent(el, "mousedown", (e) => {
+            if (uiiOptions.mouseButton) {
+                switch (uiiOptions.mouseButton) {
+                    case "left":
+                        if (e.button != 0)
+                            return;
+                        break;
+                    case "right":
+                        if (e.button != 2)
+                            return;
+                        break;
+                }
+            }
             let t = e.target;
             if (!t)
                 return;
-            const hasCursor = !isEmpty(get(uiiOptions, 'cursor.active'));
+            const hasCursor = !isEmpty(get(uiiOptions, "cursor.active"));
             const currentStyle = el.style;
             const currentCStyle = window.getComputedStyle(el);
             const currentRect = el.getBoundingClientRect();
@@ -481,12 +515,23 @@ class Uii {
             let onPointerMove;
             let onPointerEnd;
             const toBreak = !!onPointerDown({
-                onPointerMove: (pm) => { onPointerMove = pm; },
-                onPointerStart: (ps) => { onPointerStart = ps; },
-                onPointerEnd: (pe) => { onPointerEnd = pe; },
+                onPointerMove: (pm) => {
+                    onPointerMove = pm;
+                },
+                onPointerStart: (ps) => {
+                    onPointerStart = ps;
+                },
+                onPointerEnd: (pe) => {
+                    onPointerEnd = pe;
+                },
                 ev: e,
-                pointX: e.clientX, pointY: e.clientY, target: t,
-                currentTarget: el, currentStyle, currentCStyle, currentRect
+                pointX: e.clientX,
+                pointY: e.clientY,
+                target: t,
+                currentTarget: el,
+                currentStyle,
+                currentCStyle,
+                currentRect,
             });
             if (toBreak) {
                 e.preventDefault();
@@ -511,12 +556,21 @@ class Uii {
                         return false;
                     }
                 }
-                onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+                onPointerMove &&
+                    onPointerMove({
+                        ev,
+                        pointX: ev.clientX,
+                        pointY: ev.clientY,
+                        offX,
+                        offY,
+                        currentStyle,
+                        currentCStyle,
+                    });
             };
             const pointerEnd = (ev) => {
-                document.removeEventListener('mousemove', pointerMove, false);
-                document.removeEventListener('mouseup', pointerEnd, false);
-                window.removeEventListener('blur', pointerEnd, false);
+                document.removeEventListener("mousemove", pointerMove, false);
+                document.removeEventListener("mouseup", pointerEnd, false);
+                window.removeEventListener("blur", pointerEnd, false);
                 if (dragging) {
                     if (toLockPage) {
                         unlockPage();
@@ -1174,7 +1228,6 @@ class Resizable extends Uii {
                         break;
                 }
                 if (changeW) {
-                    console.log(minWidth, 'xxxxxx', w);
                     if (minWidth && w < minWidth)
                         w = minWidth;
                     if (maxWidth && w > maxWidth)
@@ -1348,7 +1401,8 @@ class Draggable extends Uii {
             scroll: true,
             snapOptions: {
                 tolerance: 10,
-            }
+            },
+            self: false
         }, opts));
         _Draggable_instances.add(this);
         _Draggable_handleMap.set(this, new WeakMap());
@@ -1412,7 +1466,7 @@ class Draggable extends Uii {
                 draggableList = bindTarget.querySelectorAll(eleString);
                 initStyle(draggableList);
             }
-            let findRs = find(draggableList, el => el.contains(t));
+            let findRs = closest(t, node => includes(draggableList, node), 'parentNode');
             if (!findRs)
                 return true;
             const dragDom = findRs;
@@ -1420,6 +1474,8 @@ class Draggable extends Uii {
             if (handle && !handle.contains(t)) {
                 return true;
             }
+            if (opts.self && dragDom !== t)
+                return true;
             const onPointerDown = opts.onPointerDown;
             if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                 return true;
@@ -1434,11 +1490,8 @@ class Draggable extends Uii {
             const offsetXy = getPointInContainer(ev, dragDom);
             let offsetPointX = offsetXy.x;
             let offsetPointY = offsetXy.y;
-            const matrixInfo = getMatrixInfo(dragDom);
+            const matrixInfo = getMatrixInfo(dragDom, true);
             const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
-            const matrixInfoParent = getMatrixInfo(offsetParent);
-            offsetPointX = offsetPointX / (matrixInfo.scale * matrixInfoParent.scale);
-            offsetPointY = offsetPointY / (matrixInfo.scale * matrixInfoParent.scale);
             if (matrixInfo.angle != 0) {
                 offsetPointX = currentXy.x - matrixInfo.x;
                 offsetPointY = currentXy.y - matrixInfo.y;
@@ -1799,7 +1852,9 @@ const Droppables = [];
 const CLASS_DROPPABLE = "uii-droppable";
 class Droppable extends Uii {
     constructor(el, opts) {
-        super(el, assign({}, opts));
+        super(el, assign({
+            watch: true
+        }, opts));
         _Droppable_active.set(this, void 0);
         Droppables.push(this);
     }
@@ -1807,6 +1862,8 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mouseenter", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
                     droppable.classList.toggle(cls, true);
@@ -1820,6 +1877,8 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mouseleave", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
                     droppable.classList.toggle(cls, false);
@@ -1833,11 +1892,15 @@ class Droppable extends Uii {
         this.registerEvent(droppable, "mousemove", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                return;
             opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
         });
         this.registerEvent(droppable, "mouseup", (e) => {
             if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                 return;
+            if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                return;
             if (opts.hoverClass) {
                 each(split(opts.hoverClass, ' '), cls => {
                     droppable.classList.toggle(cls, false);
@@ -1849,6 +1912,10 @@ class Droppable extends Uii {
     active(target) {
         let valid = true;
         const opts = this.opts;
+        if (opts.watch && this.eleString) {
+            let nodes = document.querySelectorAll(this.eleString);
+            this.ele = toArray(nodes);
+        }
         if (isString(opts.accepts)) {
             valid = !!target.dataset.dropType && test(opts.accepts, target.dataset.dropType);
         }
@@ -2175,7 +2242,7 @@ _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap()
         if (onPointerDown && onPointerDown(ev) === false)
             return true;
         let originPos = "";
-        let matrixInfo = getMatrixInfo(currentCStyle);
+        let matrixInfo = getMatrixInfo(currentTarget);
         const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
         let hitPosX = startxy.x;
         let hitPosY = startxy.y;
@@ -2703,7 +2770,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.0-beta.2";
+var version = "1.3.0-beta.4";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.3.0-beta.2
+ * uiik v1.3.0-beta.4
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/is'), require('myfx/collection'), require('myfx/object'), require('myfx/string'), require('myfx/array'), require('myfx/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/string', 'myfx/array', 'myfx/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.string, global.array, global.utils));
-})(this, (function (exports, is, collection, object, string, array, utils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/is'), require('myfx/collection'), require('myfx/object'), require('myfx/string'), require('myfx/array'), require('myfx/tree'), require('myfx/utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/string', 'myfx/array', 'myfx/tree', 'myfx/utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.string, global.array, global.tree, global.utils));
+})(this, (function (exports, is, collection, object, string, array, tree, utils) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -283,41 +283,59 @@
         const h = parseFloat(cStyle.height);
         return { w, h };
     }
-    const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
-    function getMatrixInfo(elCStyle) {
-        let a = 1, b = 0, x = 0, y = 0;
-        let e = undefined, f = undefined;
-        if (elCStyle instanceof SVGGraphicsElement) {
-            const transMatrix = elCStyle.transform.animVal[0];
-            if (transMatrix) {
-                e = transMatrix.matrix.e;
-                f = transMatrix.matrix.f;
+    const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<e>[\d.-]+)\s*,\s*(?<f>[\d.-]+)\s*\)/;
+    function getMatrixInfo(el, recur = false) {
+        const rs = _getMatrixInfo(el);
+        if (recur) {
+            let p = el.parentElement;
+            while (p && p.tagName !== "BODY") {
+                let prs = _getMatrixInfo(p);
+                rs.scale *= prs.scale;
+                p = p.parentElement;
             }
-            elCStyle = window.getComputedStyle(elCStyle);
         }
-        else {
-            if (elCStyle instanceof HTMLElement) {
-                elCStyle = window.getComputedStyle(elCStyle);
-            }
-        }
-        const matched = elCStyle.transform.match(EXP_MATRIX);
-        if (matched && matched.groups) {
-            a = parseFloat(matched.groups.a);
-            b = parseFloat(matched.groups.b);
-            parseFloat(matched.groups.c);
-            parseFloat(matched.groups.d);
-            x = parseFloat(matched.groups.x);
-            y = parseFloat(matched.groups.y);
+        return rs;
+    }
+    function _getMatrixInfo(el) {
+        const rs = { scale: 1, angle: 0, x: 0, y: 0 };
+        let a = 1, b = 0;
+        let elCStyle;
+        if (el instanceof SVGGraphicsElement || el instanceof HTMLElement) {
+            elCStyle = window.getComputedStyle(el);
         }
-        if (e && f) {
-            x = e;
-            y = f;
+        let matrix = _getMatrix(elCStyle.transform);
+        if (matrix) {
+            a = matrix.a;
+            b = matrix.b;
+            matrix.c;
+            matrix.d;
+            rs.x = matrix.e;
+            rs.y = matrix.f;
         }
-        const rs = { scale: 1, angle: 0, x, y };
         rs.scale = Math.sqrt(a * a + b * b);
         rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
         return rs;
     }
+    function _getMatrix(transform) {
+        let matrix = null;
+        if (window.WebKitCSSMatrix) {
+            matrix = new WebKitCSSMatrix(transform);
+        }
+        else {
+            const matched = transform.match(EXP_MATRIX);
+            if (matched && matched.groups) {
+                matrix = {
+                    a: parseFloat(matched.groups.a),
+                    b: parseFloat(matched.groups.b),
+                    c: parseFloat(matched.groups.c),
+                    d: parseFloat(matched.groups.d),
+                    e: parseFloat(matched.groups.e),
+                    f: parseFloat(matched.groups.f),
+                };
+            }
+        }
+        return matrix;
+    }
     function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
         if (!elRect) {
             elRect = el.getBoundingClientRect();
@@ -326,7 +344,7 @@
             elCStyle = window.getComputedStyle(el);
         }
         if (!matrixInfo) {
-            matrixInfo = getMatrixInfo(elCStyle);
+            matrixInfo = getMatrixInfo(el, true);
         }
         const scale = matrixInfo.scale;
         let x = event.clientX -
@@ -343,7 +361,7 @@
         const elRect = el.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
         const elCStyle = window.getComputedStyle(container);
-        const matrixInfo = getMatrixInfo(elCStyle);
+        const matrixInfo = getMatrixInfo(container);
         const scale = matrixInfo.scale;
         let x = elRect.x -
             containerRect.x -
@@ -388,7 +406,7 @@
         const h = parseFloat(cStyle.height);
         const { originX, originY } = parseOxy(ox, oy, w, h);
         const { x, y, sx, sy } = el instanceof SVGGraphicsElement ? getCenterXySVG(el, originX, originY) : getCenterXy(el);
-        const { angle } = getMatrixInfo(cStyle);
+        const { angle } = getMatrixInfo(el);
         return calcVertex(w, h, x, y, sx, sy, angle * ONE_ANG);
     }
     function calcVertex(w, h, cx, cy, sx, sy, radian) {
@@ -429,6 +447,7 @@
             this.enabled = true;
             _Uii_listeners.set(this, []);
             this.opts = opts || {};
+            this.opts.mouseButton = this.opts.mouseButton || 'left';
             if (is.isArrayLike(ele) && !is.isString(ele)) {
                 this.ele = collection.map(ele, (el) => {
                     let e = is.isString(el) ? document.querySelector(el) : el;
@@ -448,7 +467,9 @@
                     console.error('Invalid element "' + ele + '"');
                     return;
                 }
-                this.ele = is.isArrayLike(el) ? collection.toArray(el) : [el];
+                this.ele = is.isArrayLike(el)
+                    ? collection.toArray(el)
+                    : [el];
             }
         }
         destroy() {
@@ -462,11 +483,23 @@
             const threshold = opts.threshold || 0;
             const toLockPage = opts.lockPage || false;
             const uiiOptions = this.opts;
-            this.registerEvent(el, 'mousedown', (e) => {
+            this.registerEvent(el, "mousedown", (e) => {
+                if (uiiOptions.mouseButton) {
+                    switch (uiiOptions.mouseButton) {
+                        case "left":
+                            if (e.button != 0)
+                                return;
+                            break;
+                        case "right":
+                            if (e.button != 2)
+                                return;
+                            break;
+                    }
+                }
                 let t = e.target;
                 if (!t)
                     return;
-                const hasCursor = !is.isEmpty(object.get(uiiOptions, 'cursor.active'));
+                const hasCursor = !is.isEmpty(object.get(uiiOptions, "cursor.active"));
                 const currentStyle = el.style;
                 const currentCStyle = window.getComputedStyle(el);
                 const currentRect = el.getBoundingClientRect();
@@ -480,12 +513,23 @@
                 let onPointerMove;
                 let onPointerEnd;
                 const toBreak = !!onPointerDown({
-                    onPointerMove: (pm) => { onPointerMove = pm; },
-                    onPointerStart: (ps) => { onPointerStart = ps; },
-                    onPointerEnd: (pe) => { onPointerEnd = pe; },
+                    onPointerMove: (pm) => {
+                        onPointerMove = pm;
+                    },
+                    onPointerStart: (ps) => {
+                        onPointerStart = ps;
+                    },
+                    onPointerEnd: (pe) => {
+                        onPointerEnd = pe;
+                    },
                     ev: e,
-                    pointX: e.clientX, pointY: e.clientY, target: t,
-                    currentTarget: el, currentStyle, currentCStyle, currentRect
+                    pointX: e.clientX,
+                    pointY: e.clientY,
+                    target: t,
+                    currentTarget: el,
+                    currentStyle,
+                    currentCStyle,
+                    currentRect,
                 });
                 if (toBreak) {
                     e.preventDefault();
@@ -510,12 +554,21 @@
                             return false;
                         }
                     }
-                    onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+                    onPointerMove &&
+                        onPointerMove({
+                            ev,
+                            pointX: ev.clientX,
+                            pointY: ev.clientY,
+                            offX,
+                            offY,
+                            currentStyle,
+                            currentCStyle,
+                        });
                 };
                 const pointerEnd = (ev) => {
-                    document.removeEventListener('mousemove', pointerMove, false);
-                    document.removeEventListener('mouseup', pointerEnd, false);
-                    window.removeEventListener('blur', pointerEnd, false);
+                    document.removeEventListener("mousemove", pointerMove, false);
+                    document.removeEventListener("mouseup", pointerEnd, false);
+                    window.removeEventListener("blur", pointerEnd, false);
                     if (dragging) {
                         if (toLockPage) {
                             unlockPage();
@@ -1173,7 +1226,6 @@
                             break;
                     }
                     if (changeW) {
-                        console.log(minWidth, 'xxxxxx', w);
                         if (minWidth && w < minWidth)
                             w = minWidth;
                         if (maxWidth && w > maxWidth)
@@ -1347,7 +1399,8 @@
                 scroll: true,
                 snapOptions: {
                     tolerance: 10,
-                }
+                },
+                self: false
             }, opts));
             _Draggable_instances.add(this);
             _Draggable_handleMap.set(this, new WeakMap());
@@ -1411,7 +1464,7 @@
                     draggableList = bindTarget.querySelectorAll(eleString);
                     initStyle(draggableList);
                 }
-                let findRs = collection.find(draggableList, el => el.contains(t));
+                let findRs = tree.closest(t, node => collection.includes(draggableList, node), 'parentNode');
                 if (!findRs)
                     return true;
                 const dragDom = findRs;
@@ -1419,6 +1472,8 @@
                 if (handle && !handle.contains(t)) {
                     return true;
                 }
+                if (opts.self && dragDom !== t)
+                    return true;
                 const onPointerDown = opts.onPointerDown;
                 if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
                     return true;
@@ -1433,11 +1488,8 @@
                 const offsetXy = getPointInContainer(ev, dragDom);
                 let offsetPointX = offsetXy.x;
                 let offsetPointY = offsetXy.y;
-                const matrixInfo = getMatrixInfo(dragDom);
+                const matrixInfo = getMatrixInfo(dragDom, true);
                 const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
-                const matrixInfoParent = getMatrixInfo(offsetParent);
-                offsetPointX = offsetPointX / (matrixInfo.scale * matrixInfoParent.scale);
-                offsetPointY = offsetPointY / (matrixInfo.scale * matrixInfoParent.scale);
                 if (matrixInfo.angle != 0) {
                     offsetPointX = currentXy.x - matrixInfo.x;
                     offsetPointY = currentXy.y - matrixInfo.y;
@@ -1798,7 +1850,9 @@
     const CLASS_DROPPABLE = "uii-droppable";
     class Droppable extends Uii {
         constructor(el, opts) {
-            super(el, object.assign({}, opts));
+            super(el, object.assign({
+                watch: true
+            }, opts));
             _Droppable_active.set(this, void 0);
             Droppables.push(this);
         }
@@ -1806,6 +1860,8 @@
             this.registerEvent(droppable, "mouseenter", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                    return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
                         droppable.classList.toggle(cls, true);
@@ -1819,6 +1875,8 @@
             this.registerEvent(droppable, "mouseleave", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                    return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
                         droppable.classList.toggle(cls, false);
@@ -1832,11 +1890,15 @@
             this.registerEvent(droppable, "mousemove", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                    return;
                 opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
             });
             this.registerEvent(droppable, "mouseup", (e) => {
                 if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
                     return;
+                if (__classPrivateFieldGet(this, _Droppable_active, "f") === droppable)
+                    return;
                 if (opts.hoverClass) {
                     collection.each(string.split(opts.hoverClass, ' '), cls => {
                         droppable.classList.toggle(cls, false);
@@ -1848,6 +1910,10 @@
         active(target) {
             let valid = true;
             const opts = this.opts;
+            if (opts.watch && this.eleString) {
+                let nodes = document.querySelectorAll(this.eleString);
+                this.ele = collection.toArray(nodes);
+            }
             if (is.isString(opts.accepts)) {
                 valid = !!target.dataset.dropType && string.test(opts.accepts, target.dataset.dropType);
             }
@@ -2174,7 +2240,7 @@
             if (onPointerDown && onPointerDown(ev) === false)
                 return true;
             let originPos = "";
-            let matrixInfo = getMatrixInfo(currentCStyle);
+            let matrixInfo = getMatrixInfo(currentTarget);
             const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
             let hitPosX = startxy.x;
             let hitPosY = startxy.y;
@@ -2702,7 +2768,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.0-beta.2";
+    var version = "1.3.0-beta.4";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.4",
   "description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
   "main": "index.js",
   "module": "index.esm.js",

package/types.d.ts

@@ -1,4 +1,4 @@
-import { UiiTransform } from './transform';
+import { UiiTransform } from "./transform";
 export declare abstract class Uii {
     #private;
     protected ele: Array<HTMLElement>;
@@ -88,6 +88,8 @@ export type SplittableOptions = {
     }, event: MouseEvent) => void;
 };
 export type DraggableOptions = {
+    self?: boolean;
+    mouseButton?: 'all' | "left" | "right";
     containment?: boolean | HTMLElement | string;
     watch?: boolean | string;
     threshold?: number;
@@ -148,6 +150,7 @@ export type DraggableOptions = {
     }, event: MouseEvent) => void;
 };
 export type DroppableOptions = {
+    watch?: boolean;
     activeClass?: string;
     hoverClass?: string;
     accepts?: ((ele: Array<HTMLElement>, draggable: HTMLElement) => boolean) | string;
@@ -235,10 +238,10 @@ export type SortableOptions = {
     handle?: string;
     activeClass?: string;
     move?: {
-        to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | 'copy';
+        to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | "copy";
         from?: ((item: HTMLElement, from: HTMLElement, to: HTMLElement) => boolean) | boolean;
     };
-    spill?: 'remove' | 'revert';
+    spill?: "remove" | "revert";
     sort?: boolean;
     onActive?: (data: {
         item: HTMLElement;

package/utils.d.ts

@@ -26,7 +26,7 @@ export declare function getStyleSize(el: HTMLElement | SVGGraphicsElement, cStyl
     w: number;
     h: number;
 };
-export declare function getMatrixInfo(elCStyle: CSSStyleDeclaration | HTMLElement | SVGGraphicsElement): {
+export declare function getMatrixInfo(el: HTMLElement | SVGGraphicsElement, recur?: boolean): {
     scale: number;
     angle: number;
     x: number;