misp-ui-library-test 0.0.1

package/src/utils/draggable/draggable.js

@@ -0,0 +1,478 @@
+/**
+ * @fileoverview Vue2 UI Library - Draggable 自由拖拽模块
+ * @description 实现元素自由拖拽定位功能（零外部依赖），支持边界限制、网格对齐、坐标轴锁定
+ * @module utils/draggable/draggable
+ */
+
+import { on, off, addClass, removeClass } from '../dom';
+import {
+  isTouchEvent,
+  getEventCoords,
+  getRect,
+  bindDragEvents,
+  closest,
+  assign,
+  preventDefault
+} from './core';
+
+/**
+ * 默认配置
+ */
+var defaults = {
+  handle: null,          // 拖拽手柄选择器
+  filter: null,          // 过滤选择器
+  disabled: false,       // 是否禁用
+  axis: null,            // 锁定轴 'x' | 'y' | null
+  bounds: null,          // 边界限制：parent | selector | {left, top, right, bottom}
+  grid: null,            // 网格对齐 [x, y]
+  containment: false,    // 是否限制在父元素内
+  revert: false,         // 是否回到原位
+  revertDuration: 500,   // 回弹动画时长
+  opacity: null,         // 拖拽时透明度
+  zIndex: 9999,          // 拖拽时 z-index
+  cursor: 'move',        // 鼠标样式
+  distance: 1,           // 触发拖拽的最小距离
+  // 回调函数
+  onStart: null,
+  onMove: null,
+  onEnd: null,
+  onClick: null
+};
+
+/**
+ * 获取边界矩形
+ * @param {HTMLElement} el
+ * @param {*} bounds
+ * @returns {{left: number, top: number, right: number, bottom: number}}
+ */
+function getBoundsRect(el, bounds) {
+  if (!bounds) return null;
+
+  if (bounds === 'parent') {
+    var parent = el.parentNode;
+    if (!parent) return null;
+    var pRect = getRect(parent);
+    var eRect = getRect(el);
+    return {
+      left: pRect.left,
+      top: pRect.top,
+      right: pRect.right - eRect.width,
+      bottom: pRect.bottom - eRect.height
+    };
+  }
+
+  if (typeof bounds === 'string') {
+    var container = document.querySelector(bounds);
+    if (!container) return null;
+    var cRect = getRect(container);
+    var elRect = getRect(el);
+    return {
+      left: cRect.left,
+      top: cRect.top,
+      right: cRect.right - elRect.width,
+      bottom: cRect.bottom - elRect.height
+    };
+  }
+
+  if (typeof bounds === 'object') {
+    var elR = getRect(el);
+    return {
+      left: bounds.left !== undefined ? bounds.left : -Infinity,
+      top: bounds.top !== undefined ? bounds.top : -Infinity,
+      right: bounds.right !== undefined ? bounds.right - elR.width : Infinity,
+      bottom: bounds.bottom !== undefined ? bounds.bottom - elR.height : Infinity
+    };
+  }
+
+  return null;
+}
+
+/**
+ * 吸附到网格
+ * @param {number} value
+ * @param {number} grid
+ * @returns {number}
+ */
+function snapToGrid(value, grid) {
+  if (!grid || grid <= 0) return value;
+  return Math.round(value / grid) * grid;
+}
+
+/**
+ * Draggable 构造函数
+ * @param {HTMLElement} el - 目标元素
+ * @param {Object} options - 配置项
+ * @constructor
+ */
+function Draggable(el, options) {
+  if (!(this instanceof Draggable)) {
+    return new Draggable(el, options);
+  }
+
+  this.el = el;
+  this.options = assign({}, defaults, options);
+  this._unbindEvents = null;
+  this._isDragging = false;
+  this._startPos = { x: 0, y: 0 };
+  this._startMouse = { x: 0, y: 0 };
+  this._lastPos = { x: 0, y: 0 };
+  this._originalStyle = {};
+
+  this._init();
+}
+
+Draggable.prototype = {
+
+  /**
+   * 初始化
+   * @private
+   */
+  _init: function() {
+    var self = this;
+    var el = this.el;
+    var opts = this.options;
+
+    // 确保元素可定位
+    var position = getComputedStyle(el).position;
+    if (position === 'static') {
+      el.style.position = 'relative';
+    }
+
+    // 绑定事件
+    this._unbindEvents = bindDragEvents(el, {
+      start: function(evt) { self._onDragStart(evt); },
+      move: function(evt) { self._onDragMove(evt); },
+      end: function(evt) { self._onDragEnd(evt); }
+    });
+
+    el._draggableInstance = this;
+  },
+
+  /**
+   * 拖拽开始
+   * @param {Event} evt
+   * @private
+   */
+  _onDragStart: function(evt) {
+    if (this.options.disabled) return;
+
+    var target = evt.target;
+    var opts = this.options;
+
+    // filter 过滤
+    if (opts.filter) {
+      var filtered = closest(target, opts.filter, this.el);
+      if (filtered) {
+        if (typeof opts.onClick === 'function') {
+          opts.onClick.call(this, evt);
+        }
+        return;
+      }
+    }
+
+    // handle 限制
+    if (opts.handle) {
+      var handleEl = closest(target, opts.handle, this.el);
+      if (!handleEl) {
+        if (typeof opts.onClick === 'function') {
+          opts.onClick.call(this, evt);
+        }
+        return;
+      }
+    }
+
+    var coords = getEventCoords(evt);
+    var rect = getRect(this.el);
+
+    this._isDragging = false;
+    this._startMouse = { x: coords.clientX, y: coords.clientY };
+    this._startPos = { x: this.el.offsetLeft, y: this.el.offsetTop };
+    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
+    this._startEvt = evt;
+  },
+
+  /**
+   * 拖拽移动
+   * @param {Event} evt
+   * @private
+   */
+  _onDragMove: function(evt) {
+    var coords = getEventCoords(evt);
+    var opts = this.options;
+
+    // 检查触发距离
+    if (!this._isDragging) {
+      var dist = Math.sqrt(
+        Math.pow(coords.clientX - this._startMouse.x, 2) +
+        Math.pow(coords.clientY - this._startMouse.y, 2)
+      );
+      if (dist < opts.distance) return;
+
+      this._isDragging = true;
+      this._saveOriginalStyle();
+
+      // 设置拖拽样式
+      if (opts.opacity !== null) {
+        this.el.style.opacity = opts.opacity;
+      }
+      if (opts.zIndex !== null) {
+        this.el.style.zIndex = opts.zIndex;
+      }
+      if (opts.cursor) {
+        this.el.style.cursor = opts.cursor;
+      }
+
+      addClass(this.el, 'ui-draggable-dragging');
+
+      if (typeof opts.onStart === 'function') {
+        opts.onStart.call(this, {
+          target: this.el,
+          left: this._startPos.x,
+          top: this._startPos.y
+        });
+      }
+    }
+
+    if (!this._isDragging) return;
+
+    preventDefault(evt);
+
+    var dx = coords.clientX - this._startMouse.x;
+    var dy = coords.clientY - this._startMouse.y;
+
+    var newX = this._startPos.x + dx;
+    var newY = this._startPos.y + dy;
+
+    // 轴锁定
+    if (opts.axis === 'x') {
+      newY = this._startPos.y;
+    } else if (opts.axis === 'y') {
+      newX = this._startPos.x;
+    }
+
+    // 边界限制
+    var bounds = getBoundsRect(this.el, opts.bounds || (opts.containment ? 'parent' : null));
+    if (bounds) {
+      newX = Math.max(bounds.left, Math.min(newX, bounds.right));
+      newY = Math.max(bounds.top, Math.min(newY, bounds.bottom));
+    }
+
+    // 网格对齐
+    if (opts.grid) {
+      var gridX = Array.isArray(opts.grid) ? opts.grid[0] : opts.grid;
+      var gridY = Array.isArray(opts.grid) ? opts.grid[1] : opts.grid;
+      newX = snapToGrid(newX, gridX);
+      newY = snapToGrid(newY, gridY);
+    }
+
+    this.el.style.left = newX + 'px';
+    this.el.style.top = newY + 'px';
+    this._lastPos = { x: newX, y: newY };
+
+    if (typeof opts.onMove === 'function') {
+      opts.onMove.call(this, {
+        target: this.el,
+        left: newX,
+        top: newY,
+        dx: dx,
+        dy: dy
+      });
+    }
+  },
+
+  /**
+   * 拖拽结束
+   * @param {Event} evt
+   * @private
+   */
+  _onDragEnd: function(evt) {
+    if (!this._isDragging) {
+      // 未触发拖拽，视为点击
+      if (typeof this.options.onClick === 'function') {
+        this.options.onClick.call(this, evt);
+      }
+      return;
+    }
+
+    var self = this;
+    var opts = this.options;
+
+    this._isDragging = false;
+    removeClass(this.el, 'ui-draggable-dragging');
+
+    // 回弹效果
+    if (opts.revert) {
+      this._animateTo(this._startPos.x, this._startPos.y, opts.revertDuration, function() {
+        self._restoreOriginalStyle();
+      });
+    } else {
+      this._restoreOriginalStyle();
+    }
+
+    if (typeof opts.onEnd === 'function') {
+      opts.onEnd.call(this, {
+        target: this.el,
+        left: this._lastPos.x,
+        top: this._lastPos.y
+      });
+    }
+  },
+
+  /**
+   * 保存元素原始样式
+   * @private
+   */
+  _saveOriginalStyle: function() {
+    var el = this.el;
+    this._originalStyle = {
+      left: el.style.left,
+      top: el.style.top,
+      position: el.style.position,
+      zIndex: el.style.zIndex,
+      opacity: el.style.opacity,
+      cursor: el.style.cursor,
+      transition: el.style.transition,
+      transform: el.style.transform
+    };
+  },
+
+  /**
+   * 恢复元素原始样式
+   * @private
+   */
+  _restoreOriginalStyle: function() {
+    var s = this._originalStyle;
+    var el = this.el;
+    if (s.left !== undefined) el.style.left = s.left;
+    if (s.top !== undefined) el.style.top = s.top;
+    if (s.position !== undefined) el.style.position = s.position;
+    if (s.zIndex !== undefined) el.style.zIndex = s.zIndex;
+    if (s.opacity !== undefined) el.style.opacity = s.opacity;
+    if (s.cursor !== undefined) el.style.cursor = s.cursor;
+    if (s.transition !== undefined) el.style.transition = s.transition;
+    if (s.transform !== undefined) el.style.transform = s.transform;
+  },
+
+  /**
+   * 动画移动到指定位置
+   * @param {number} x
+   * @param {number} y
+   * @param {number} duration
+   * @param {Function} callback
+   * @private
+   */
+  _animateTo: function(x, y, duration, callback) {
+    var el = this.el;
+    var startX = parseFloat(el.style.left) || 0;
+    var startY = parseFloat(el.style.top) || 0;
+    var dx = x - startX;
+    var dy = y - startY;
+    var startTime = Date.now();
+
+    el.style.transition = 'none';
+
+    var tick = function() {
+      var now = Date.now();
+      var progress = Math.min((now - startTime) / duration, 1);
+      var ease = 1 - Math.pow(1 - progress, 3); // easeOutCubic
+
+      el.style.left = (startX + dx * ease) + 'px';
+      el.style.top = (startY + dy * ease) + 'px';
+
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      } else {
+        if (callback) callback();
+      }
+    };
+
+    requestAnimationFrame(tick);
+  },
+
+  // ==================== 公共方法 ====================
+
+  /**
+   * 设置元素位置
+   * @param {number} x
+   * @param {number} y
+   */
+  setPosition: function(x, y) {
+    this.el.style.left = x + 'px';
+    this.el.style.top = y + 'px';
+    this._lastPos = { x: x, y: y };
+  },
+
+  /**
+   * 获取当前位置
+   * @returns {{x: number, y: number}}
+   */
+  getPosition: function() {
+    return {
+      x: parseFloat(this.el.style.left) || this.el.offsetLeft,
+      y: parseFloat(this.el.style.top) || this.el.offsetTop
+    };
+  },
+
+  /**
+   * 启用拖拽
+   */
+  enable: function() {
+    this.options.disabled = false;
+  },
+
+  /**
+   * 禁用拖拽
+   */
+  disable: function() {
+    this.options.disabled = true;
+  },
+
+  /**
+   * 销毁实例
+   */
+  destroy: function() {
+    if (this._unbindEvents) {
+      this._unbindEvents();
+      this._unbindEvents = null;
+    }
+    removeClass(this.el, 'ui-draggable-dragging');
+    delete this.el._draggableInstance;
+  },
+
+  /**
+   * 获取/设置选项
+   * @param {string} name
+   * @param {*} [value]
+   * @returns {*}
+   */
+  option: function(name, value) {
+    if (value === undefined) {
+      return this.options[name];
+    }
+    this.options[name] = value;
+  }
+};
+
+// 静态方法
+
+/**
+ * 获取元素关联的 Draggable 实例
+ * @param {HTMLElement} el
+ * @returns {Draggable|null}
+ */
+Draggable.get = function(el) {
+  return el && el._draggableInstance || null;
+};
+
+/**
+ * 创建实例
+ * @param {HTMLElement} el
+ * @param {Object} options
+ * @returns {Draggable}
+ */
+Draggable.create = function(el, options) {
+  return new Draggable(el, options);
+};
+
+export default Draggable;
+export { Draggable };

package/src/utils/draggable/index.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Vue2 UI Library - Draggable 工具包入口
+ * @description 提供 Sortable（列表排序）和 Draggable（自由拖拽）两大核心能力，零外部依赖
+ * @module utils/draggable
+ *
+ * @example
+ * // Sortable 列表排序
+ * import { Sortable } from '@/utils/draggable';
+ * new Sortable(document.getElementById('list'), {
+ *   group: 'shared',
+ *   animation: 150,
+ *   ghostClass: 'sortable-ghost',
+ *   onEnd: function(evt) {
+ *     console.log('从', evt.oldIndex, '移动到', evt.newIndex);
+ *   }
+ * });
+ *
+ * @example
+ * // Draggable 自由拖拽
+ * import { Draggable } from '@/utils/draggable';
+ * new Draggable(document.getElementById('box'), {
+ *   axis: 'x',
+ *   containment: true,
+ *   grid: [10, 10],
+ *   onMove: function(evt) {
+ *     console.log('位置：', evt.left, evt.top);
+ *   }
+ * });
+ */
+
+export { Sortable } from './sortable';
+export { Draggable } from './draggable';
+export {
+  isTouchEvent,
+  getEventCoords,
+  getRect,
+  distance,
+  index,
+  getChildren,
+  swapNodes,
+  closestInsert,
+  cloneElement,
+  setTransform,
+  clearTransform,
+  bindDragEvents,
+  contains,
+  closest,
+  throttle,
+  preventDefault,
+  resolveDragTarget,
+  uniqueId,
+  assign
+} from './core';
+
+import { Sortable } from './sortable';
+import { Draggable } from './draggable';
+
+export default {
+  Sortable: Sortable,
+  Draggable: Draggable
+};