misp-ui-library-test 0.0.1

package/src/utils/draggable/core.js

@@ -0,0 +1,379 @@
+/**
+ * @fileoverview Vue2 UI Library - Draggable 核心工具模块
+ * @description 提供拖拽排序相关的 DOM 操作、位置计算、事件处理等底层辅助函数（零外部依赖）
+ * @module utils/draggable/core
+ */
+
+import { on, off } from '../dom';
+
+/**
+ * 判断是否为 touch 事件
+ * @param {Event} evt - 事件对象
+ * @returns {boolean}
+ */
+export function isTouchEvent(evt) {
+  return evt.type && evt.type.indexOf('touch') === 0;
+}
+
+/**
+ * 获取事件中的坐标（兼容 mouse/touch）
+ * @param {Event} evt - 事件对象
+ * @returns {{clientX: number, clientY: number}}
+ */
+export function getEventCoords(evt) {
+  if (isTouchEvent(evt)) {
+    var touch = evt.touches[0] || evt.changedTouches[0];
+    return { clientX: touch.clientX, clientY: touch.clientY };
+  }
+  return { clientX: evt.clientX, clientY: evt.clientY };
+}
+
+/**
+ * 获取元素相对于视口的矩形信息
+ * @param {HTMLElement} el
+ * @returns {DOMRect}
+ */
+export function getRect(el) {
+  return el.getBoundingClientRect();
+}
+
+/**
+ * 计算两点之间的距离
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @returns {number}
+ */
+export function distance(x1, y1, x2, y2) {
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+}
+
+/**
+ * 获取元素在父级中的索引（仅限元素节点）
+ * @param {HTMLElement} el
+ * @param {string} [selector] - 可选的选择器过滤
+ * @returns {number}
+ */
+export function index(el, selector) {
+  if (!el || !el.parentNode) return -1;
+  var idx = 0;
+  var children = el.parentNode.children;
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    if (selector && !(child.matches && child.matches(selector))) continue;
+    if (child === el) return idx;
+    if (!selector || (child.matches && child.matches(selector))) idx++;
+  }
+  return -1;
+}
+
+/**
+ * 获取父级中所有匹配选择器的子元素
+ * @param {HTMLElement} parent
+ * @param {string} selector
+ * @returns {HTMLElement[]}
+ */
+export function getChildren(parent, selector) {
+  if (!parent) return [];
+  var children = Array.prototype.slice.call(parent.children);
+  if (!selector) return children;
+  return children.filter(function(child) {
+    return child.matches && child.matches(selector);
+  });
+}
+
+/**
+ * 交换两个 DOM 元素的位置
+ * @param {HTMLElement} el1
+ * @param {HTMLElement} el2
+ */
+export function swapNodes(el1, el2) {
+  if (!el1 || !el2 || el1 === el2) return;
+  var parent1 = el1.parentNode;
+  var parent2 = el2.parentNode;
+  var next1 = el1.nextSibling;
+  var next2 = el2.nextSibling;
+
+  if (parent1 === parent2) {
+    if (next1 === el2) {
+      parent1.insertBefore(el2, el1);
+    } else if (next2 === el1) {
+      parent1.insertBefore(el1, el2);
+    } else {
+      parent1.insertBefore(el2, next1);
+      parent2.insertBefore(el1, next2);
+    }
+  } else {
+    parent1.insertBefore(el2, next1);
+    parent2.insertBefore(el1, next2);
+  }
+}
+
+/**
+ * 在拖拽时计算鼠标位置下最近的插入目标元素和方向
+ * @param {HTMLElement[]} children - 所有候选子元素
+ * @param {number} clientX - 鼠标 X 坐标
+ * @param {number} clientY - 鼠标 Y 坐标
+ * @param {string} direction - 方向 'vertical' | 'horizontal'
+ * @returns {{target: HTMLElement|null, after: boolean}}
+ */
+export function closestInsert(children, clientX, clientY, direction) {
+  var minDistance = Infinity;
+  var target = null;
+  var after = false;
+
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    if (child.style.display === 'none') continue;
+
+    var rect = getRect(child);
+    var centerX = rect.left + rect.width / 2;
+    var centerY = rect.top + rect.height / 2;
+
+    if (direction === 'horizontal') {
+      var distX = Math.abs(clientX - centerX);
+      if (distX < minDistance) {
+        minDistance = distX;
+        target = child;
+        after = clientX > centerX;
+      }
+    } else {
+      var distY = Math.abs(clientY - centerY);
+      if (distY < minDistance) {
+        minDistance = distY;
+        target = child;
+        after = clientY > centerY;
+      }
+    }
+  }
+
+  return { target: target, after: after };
+}
+
+/**
+ * 克隆一个元素（用于 ghost 或 clone）
+ * @param {HTMLElement} el
+ * @param {boolean} [deep=true] - 是否深克隆
+ * @returns {HTMLElement}
+ */
+export function cloneElement(el, deep) {
+  if (deep === undefined) deep = true;
+  return el.cloneNode(deep);
+}
+
+/**
+ * 设置元素的 transform 位移
+ * @param {HTMLElement} el
+ * @param {number} x
+ * @param {number} y
+ */
+export function setTransform(el, x, y) {
+  el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+}
+
+/**
+ * 清除元素的 transform
+ * @param {HTMLElement} el
+ */
+export function clearTransform(el) {
+  el.style.transform = '';
+}
+
+/**
+ * 设置元素的绝对定位并保留原位置
+ * @param {HTMLElement} el
+ * @param {DOMRect} rect
+ */
+export function setAbsolutePosition(el, rect) {
+  el.style.position = 'absolute';
+  el.style.top = rect.top + 'px';
+  el.style.left = rect.left + 'px';
+  el.style.width = rect.width + 'px';
+  el.style.height = rect.height + 'px';
+}
+
+/**
+ * 绑定拖拽相关的事件（mouse + touch）
+ * @param {HTMLElement} el
+ * @param {Object} handlers
+ * @param {Function} [handlers.start]
+ * @param {Function} [handlers.move]
+ * @param {Function} [handlers.end]
+ * @returns {Function} 解绑函数
+ */
+export function bindDragEvents(el, handlers) {
+  var start = handlers.start;
+  var move = handlers.move;
+  var end = handlers.end;
+
+  var onStart = function(evt) {
+    if (evt.type === 'mousedown' && evt.button !== 0) return;
+    if (start) start(evt);
+  };
+
+  var onMove = function(evt) {
+    if (move) move(evt);
+  };
+
+  var onEnd = function(evt) {
+    if (end) end(evt);
+    off(document, 'mousemove', onMove);
+    off(document, 'mouseup', onEnd);
+    off(document, 'touchmove', onMove);
+    off(document, 'touchend', onEnd);
+    off(document, 'touchcancel', onEnd);
+  };
+
+  var startWrapper = function(evt) {
+    onStart(evt);
+    if (isTouchEvent(evt)) {
+      on(document, 'touchmove', onMove);
+      on(document, 'touchend', onEnd);
+      on(document, 'touchcancel', onEnd);
+    } else {
+      on(document, 'mousemove', onMove);
+      on(document, 'mouseup', onEnd);
+    }
+  };
+
+  on(el, 'mousedown', startWrapper);
+  on(el, 'touchstart', startWrapper);
+
+  return function() {
+    off(el, 'mousedown', startWrapper);
+    off(el, 'touchstart', startWrapper);
+    off(document, 'mousemove', onMove);
+    off(document, 'mouseup', onEnd);
+    off(document, 'touchmove', onMove);
+    off(document, 'touchend', onEnd);
+    off(document, 'touchcancel', onEnd);
+  };
+}
+
+/**
+ * 判断一个元素是否是另一个元素的后代
+ * @param {HTMLElement} parent
+ * @param {HTMLElement} child
+ * @returns {boolean}
+ */
+export function contains(parent, child) {
+  if (!parent || !child) return false;
+  return parent === child || parent.contains(child);
+}
+
+/**
+ * 向上查找匹配选择器的最近祖先元素
+ * @param {HTMLElement} el
+ * @param {string} selector
+ * @param {HTMLElement} [until] - 查找到此元素为止
+ * @returns {HTMLElement|null}
+ */
+export function closest(el, selector, until) {
+  if (!el) return null;
+  var current = el;
+  while (current && current !== until && current !== document.body) {
+    if (current.matches && current.matches(selector)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/**
+ * 节流函数
+ * @param {Function} fn
+ * @param {number} wait
+ * @returns {Function}
+ */
+export function throttle(fn, wait) {
+  var last = 0;
+  return function() {
+    var now = Date.now();
+    var args = arguments;
+    if (now - last >= wait) {
+      last = now;
+      fn.apply(this, args);
+    }
+  };
+}
+
+/**
+ * 阻止默认行为和冒泡
+ * @param {Event} evt
+ */
+export function preventDefault(evt) {
+  if (evt.preventDefault) evt.preventDefault();
+  if (evt.stopPropagation) evt.stopPropagation();
+}
+
+/**
+ * 检查元素是否可拖拽（根据 filter/handle/draggable 配置）
+ * @param {HTMLElement} el - 被点击的元素
+ * @param {HTMLElement} root - Sortable 根元素
+ * @param {Object} options
+ * @returns {{canDrag: boolean, target: HTMLElement|null}}
+ */
+export function resolveDragTarget(el, root, options) {
+  var handle = options.handle;
+  var filter = options.filter;
+  var draggableSelector = options.draggable;
+
+  // filter 过滤：点击了 filter 指定的元素则不可拖拽
+  if (filter) {
+    var filtered = closest(el, filter, root);
+    if (filtered) {
+      return { canDrag: false, target: null };
+    }
+  }
+
+  // handle 指定：必须通过 handle 元素触发
+  if (handle) {
+    var handleEl = closest(el, handle, root);
+    if (!handleEl) {
+      return { canDrag: false, target: null };
+    }
+  }
+
+  // 查找实际被拖拽的元素
+  var target = el;
+  if (draggableSelector) {
+    target = closest(el, draggableSelector, root);
+  } else {
+    target = closest(el, '[draggable-item]', root) || closest(el, root.tagName.toLowerCase() + ' > *', root);
+  }
+
+  if (!target || target === root || !root.contains(target)) {
+    return { canDrag: false, target: null };
+  }
+
+  return { canDrag: true, target: target };
+}
+
+/**
+ * 生成唯一 ID
+ * @returns {string}
+ */
+export function uniqueId() {
+  return 'draggable_' + Math.random().toString(36).substr(2, 9);
+}
+
+/**
+ * 合并对象（浅合并）
+ * @param {...Object} objs
+ * @returns {Object}
+ */
+export function assign() {
+  var result = {};
+  for (var i = 0; i < arguments.length; i++) {
+    var obj = arguments[i];
+    if (obj) {
+      var keys = Object.keys(obj);
+      for (var j = 0; j < keys.length; j++) {
+        result[keys[j]] = obj[keys[j]];
+      }
+    }
+  }
+  return result;
+}