misp-ui-library-test 0.0.1

package/src/utils/draggable/sortable.js

@@ -0,0 +1,751 @@
+/**
+ * @fileoverview Vue2 UI Library - Sortable 排序模块
+ * @description 实现类似 SortableJS 的列表拖拽排序功能（零外部依赖）
+ * @module utils/draggable/sortable
+ */
+
+import { addClass, removeClass } from '../dom';
+import {
+  isTouchEvent,
+  getEventCoords,
+  getRect,
+  getChildren,
+  closestInsert,
+  cloneElement,
+  bindDragEvents,
+  resolveDragTarget,
+  uniqueId,
+  assign,
+  preventDefault,
+  index
+} from './core';
+
+/**
+ * 全局存储所有 Sortable 实例
+ * @type {Object<string, Sortable>}
+ */
+var sortableInstances = {};
+
+/**
+ * 当前正在拖拽的 Sortable 实例
+ * @type {Sortable|null}
+ */
+var activeSortable = null;
+
+/**
+ * 当前拖拽的元素
+ * @type {HTMLElement|null}
+ */
+var dragEl = null;
+
+/**
+ * 拖拽元素的 ghost 副本
+ * @type {HTMLElement|null}
+ */
+var ghostEl = null;
+
+/**
+ * 拖拽元素的占位符（原位置）
+ * @type {HTMLElement|null}
+ */
+var cloneEl = null;
+
+/**
+ * 起始位置索引
+ * @type {number}
+ */
+var startIndex = -1;
+
+/**
+ * 起始父级元素
+ * @type {HTMLElement|null}
+ */
+var startParent = null;
+
+/**
+ * 是否正在拖拽中
+ * @type {boolean}
+ */
+var isDragging = false;
+
+/**
+ * 拖拽起始坐标
+ * @type {{x: number, y: number}}
+ */
+var startCoords = { x: 0, y: 0 };
+
+/**
+ * 上一次移动坐标
+ * @type {{x: number, y: number}}
+ */
+// var lastCoords = { x: 0, y: 0 };
+
+/**
+ * 默认配置
+ */
+var defaults = {
+  group: null,           // 分组名称，允许跨列表拖拽
+  sort: true,            // 是否允许内部排序
+  delay: 0,              // 延迟拖拽（ms）
+  delayOnTouchOnly: false,
+  touchStartThreshold: 5,// touch 移动阈值
+  disabled: false,       // 是否禁用
+  animation: 150,        // 动画时长（ms）
+  easing: '',            // 动画缓动
+  handle: null,          // 拖拽手柄选择器
+  filter: null,          // 过滤选择器
+  draggable: null,       // 可拖拽元素选择器
+  ghostClass: 'sortable-ghost',
+  chosenClass: 'sortable-chosen',
+  dragClass: 'sortable-drag',
+  forceFallback: false,  // 强制使用 fallback
+  fallbackClass: 'sortable-fallback',
+  fallbackTolerance: 0,
+  scroll: true,          // 是否自动滚动
+  scrollSensitivity: 30,
+  scrollSpeed: 10,
+  bubbleScroll: false,
+  direction: 'vertical', // 方向：vertical | horizontal
+  // 回调函数
+  onStart: null,
+  onEnd: null,
+  onAdd: null,
+  onRemove: null,
+  onUpdate: null,
+  onSort: null,
+  onMove: null,
+  onClone: null,
+  onChoose: null,
+  onUnchoose: null
+};
+
+/**
+ * 解析 group 配置
+ * @param {*} group
+ * @returns {{name: string|null, pull: boolean|string|Function, put: boolean|string|Function, revertClone: boolean}}
+ */
+function parseGroup(group) {
+  if (!group) {
+    return { name: null, pull: true, put: true, revertClone: false };
+  }
+  if (typeof group === 'string') {
+    return { name: group, pull: true, put: true, revertClone: false };
+  }
+  return assign({
+    name: null,
+    pull: true,
+    put: true,
+    revertClone: false
+  }, group);
+}
+
+/**
+ * 检查是否允许拖入（put）
+ * @param {Sortable} fromSortable
+ * @param {Sortable} toSortable
+ * @returns {boolean}
+ */
+function allowPut(fromSortable, toSortable) {
+  var fromGroup = parseGroup(fromSortable.options.group);
+  var toGroup = parseGroup(toSortable.options.group);
+
+  if (!fromGroup.name || !toGroup.name) return true;
+  if (fromGroup.name !== toGroup.name) return false;
+
+  var put = toGroup.put;
+  if (typeof put === 'function') {
+    return put(fromSortable.options.group, fromSortable, toSortable);
+  }
+  return !!put;
+}
+
+/**
+ * 检查是否允许拖出（pull）
+ * @param {Sortable} fromSortable
+ * @param {Sortable} toSortable
+ * @param {HTMLElement} dragItem
+ * @returns {boolean|string}
+ */
+function allowPull(fromSortable, toSortable, dragItem) {
+  var fromGroup = parseGroup(fromSortable.options.group);
+  var pull = fromGroup.pull;
+
+  if (typeof pull === 'function') {
+    return pull(toSortable.options.group, dragItem, fromSortable, toSortable);
+  }
+  return pull;
+}
+
+/**
+ * 获取所有注册了相同 group 的 Sortable 实例
+ * @param {string} groupName
+ * @returns {Sortable[]}
+ */
+function getSortablesByGroup(groupName) {
+  var result = [];
+  var keys = Object.keys(sortableInstances);
+  for (var i = 0; i < keys.length; i++) {
+    var s = sortableInstances[keys[i]];
+    var g = parseGroup(s.options.group);
+    if (g.name === groupName) {
+      result.push(s);
+    }
+  }
+  return result;
+}
+
+/**
+ * 创建 ghost 元素
+ * @param {HTMLElement} el
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+function createGhost(el, options) {
+  var ghost = cloneElement(el);
+  addClass(ghost, options.ghostClass);
+  ghost.style.opacity = '0.5';
+  ghost.style.position = 'fixed';
+  ghost.style.zIndex = '99999';
+  ghost.style.pointerEvents = 'none';
+  ghost.style.left = '-9999px';
+  ghost.style.top = '-9999px';
+  ghost.style.width = el.offsetWidth + 'px';
+  ghost.style.height = el.offsetHeight + 'px';
+  ghost.style.boxSizing = 'border-box';
+  return ghost;
+}
+
+/**
+ * 更新 ghost 位置
+ * @param {HTMLElement} ghost
+ * @param {number} x
+ * @param {number} y
+ * @param {HTMLElement} original
+ */
+function moveGhost(ghost, x, y, original) {
+  var rect = getRect(original);
+  ghost.style.left = (x - rect.width / 2) + 'px';
+  ghost.style.top = (y - rect.height / 2) + 'px';
+}
+
+/**
+ * 自动滚动容器
+ * @param {HTMLElement} container
+ * @param {number} clientX
+ * @param {number} clientY
+ * @param {Object} options
+ */
+function autoScroll(container, clientX, clientY, options) {
+  if (!options.scroll || !container) return;
+
+  var rect = getRect(container);
+  var sens = options.scrollSensitivity;
+  var speed = options.scrollSpeed;
+
+  if (clientY < rect.top + sens) {
+    container.scrollTop -= speed;
+  } else if (clientY > rect.bottom - sens) {
+    container.scrollTop += speed;
+  }
+
+  if (clientX < rect.left + sens) {
+    container.scrollLeft -= speed;
+  } else if (clientX > rect.right - sens) {
+    container.scrollLeft += speed;
+  }
+}
+
+/**
+ * 触发自定义事件
+ * @param {HTMLElement} el
+ * @param {string} name
+ * @param {Object} detail
+ * @returns {Event}
+ */
+function dispatchEvent(el, name, detail) {
+  var evt = document.createEvent('CustomEvent');
+  evt.initCustomEvent(name, true, true, detail);
+  el.dispatchEvent(evt);
+  return evt;
+}
+
+/**
+ * Sortable 构造函数
+ * @param {HTMLElement} el - 容器元素
+ * @param {Object} options - 配置项
+ * @constructor
+ */
+function Sortable(el, options) {
+  if (!(this instanceof Sortable)) {
+    return new Sortable(el, options);
+  }
+
+  this.el = el;
+  this.options = assign({}, defaults, options);
+  this.id = uniqueId();
+  this._unbindEvents = null;
+  this._delayTimer = null;
+  this._lastSwapEl = null;
+
+  sortableInstances[this.id] = this;
+  this._init();
+}
+
+Sortable.prototype = {
+
+  /**
+   * 初始化
+   * @private
+   */
+  _init: function() {
+    var self = this;
+    var el = this.el;
+
+    // 绑定拖拽事件
+    this._unbindEvents = bindDragEvents(el, {
+      start: function(evt) { self._onDragStart(evt); },
+      move: function(evt) { self._onDragMove(evt); },
+      end: function(evt) { self._onDragEnd(evt); }
+    });
+
+    // 添加实例引用到 DOM
+    el._sortableInstance = this;
+  },
+
+  /**
+   * 拖拽开始
+   * @param {Event} evt
+   * @private
+   */
+  _onDragStart: function(evt) {
+    if (this.options.disabled) return;
+
+    var target = evt.target;
+    var resolved = resolveDragTarget(target, this.el, this.options);
+
+    if (!resolved.canDrag) return;
+
+    var dragItem = resolved.target;
+    var self = this;
+    var opts = this.options;
+
+    // 延时拖拽
+    if (opts.delay && (!isTouchEvent(evt) || opts.delayOnTouchOnly)) {
+      this._delayTimer = setTimeout(function() {
+        self._startDrag(evt, dragItem);
+      }, opts.delay);
+    } else {
+      this._startDrag(evt, dragItem);
+    }
+  },
+
+  /**
+   * 真正开始拖拽
+   * @param {Event} evt
+   * @param {HTMLElement} dragItem
+   * @private
+   */
+  _startDrag: function(evt, dragItem) {
+    var opts = this.options;
+    var coords = getEventCoords(evt);
+
+    startCoords = { x: coords.clientX, y: coords.clientY };
+
+    dragEl = dragItem;
+    startIndex = index(dragEl);
+    startParent = dragEl.parentNode;
+    activeSortable = this;
+    isDragging = false;
+
+    // 触发 onChoose
+    if (typeof opts.onChoose === 'function') {
+      opts.onChoose.call(this, dragEl, this);
+    }
+    addClass(dragEl, opts.chosenClass);
+
+    // 延时后再真正创建 ghost（实现真正的 delay 效果）
+    // 但这里我们立即响应鼠标移动来决定是否开始真正拖拽
+    this._pendingDrag = true;
+    this._pendingItem = dragItem;
+    this._startEvt = evt;
+  },
+
+  /**
+   * 拖拽移动
+   * @param {Event} evt
+   * @private
+   */
+  _onDragMove: function(evt) {
+    if (!this._pendingDrag && !isDragging) return;
+
+    var coords = getEventCoords(evt);
+    var opts = this.options;
+
+    // 检查移动距离是否达到阈值
+    if (this._pendingDrag) {
+      var dist = Math.sqrt(
+        Math.pow(coords.clientX - startCoords.x, 2) +
+        Math.pow(coords.clientY - startCoords.y, 2)
+      );
+      var threshold = isTouchEvent(evt) ? opts.touchStartThreshold : 0;
+      if (dist < threshold) return;
+
+      this._pendingDrag = false;
+      isDragging = true;
+
+      // 创建 ghost
+      ghostEl = createGhost(dragEl, opts);
+      document.body.appendChild(ghostEl);
+
+      // 在原位置创建占位 clone
+      cloneEl = cloneElement(dragEl);
+      addClass(cloneEl, opts.dragClass);
+      dragEl.parentNode.insertBefore(cloneEl, dragEl);
+
+      // 隐藏原元素
+      dragEl.style.display = 'none';
+
+      // 触发 onStart
+      dispatchEvent(this.el, 'sortable:start', {
+        to: this.el,
+        from: this.el,
+        item: dragEl,
+        newIndex: startIndex,
+        oldIndex: startIndex
+      });
+
+      if (typeof opts.onStart === 'function') {
+        opts.onStart.call(this, {
+          to: this.el,
+          from: this.el,
+          item: dragEl,
+          newIndex: startIndex,
+          oldIndex: startIndex,
+          clone: cloneEl
+        });
+      }
+    }
+
+    if (!isDragging) return;
+
+    preventDefault(evt);
+
+    // lastCoords = { x: coords.clientX, y: coords.clientY };
+
+    // 移动 ghost
+    moveGhost(ghostEl, coords.clientX, coords.clientY, dragEl);
+
+    // 自动滚动
+    autoScroll(this.el, coords.clientX, coords.clientY, opts);
+
+    // 查找当前鼠标下的 Sortable 实例
+    var targetSortable = this._detectTargetSortable(coords.clientX, coords.clientY);
+    if (!targetSortable) return;
+
+    var targetEl = targetSortable.el;
+    var children = getChildren(targetEl, opts.draggable || '*');
+
+    // 过滤掉 ghost 和隐藏元素
+    children = children.filter(function(child) {
+      return child !== cloneEl && child.style.display !== 'none';
+    });
+
+    // 插入计算
+    var insert = closestInsert(children, coords.clientX, coords.clientY, opts.direction);
+
+    if (insert.target) {
+      var pullResult = allowPull(activeSortable, targetSortable, dragEl);
+      if (pullResult === false) return;
+      if (!allowPut(activeSortable, targetSortable)) return;
+
+      // 触发 onMove
+      if (typeof opts.onMove === 'function') {
+        var moveResult = opts.onMove.call(this, {
+          dragged: dragEl,
+          related: insert.target,
+          to: targetEl,
+          from: activeSortable.el,
+          willInsertAfter: insert.after
+        });
+        if (moveResult === false) return;
+      }
+
+      // 执行 DOM 插入
+      if (insert.after) {
+        insert.target.parentNode.insertBefore(cloneEl, insert.target.nextSibling);
+      } else {
+        insert.target.parentNode.insertBefore(cloneEl, insert.target);
+      }
+
+      // 动画效果
+      if (opts.animation) {
+        this._animate(cloneEl, opts.animation);
+      }
+
+      this._lastSwapEl = insert.target;
+    } else if (children.length === 0 && targetEl !== activeSortable.el) {
+      // 空列表插入
+      if (allowPut(activeSortable, targetSortable)) {
+        targetEl.appendChild(cloneEl);
+      }
+    }
+  },
+
+  /**
+   * 拖拽结束
+   * @param {Event} evt
+   * @private
+   */
+  _onDragEnd: function() {
+    clearTimeout(this._delayTimer);
+    this._delayTimer = null;
+    this._pendingDrag = false;
+
+    if (!isDragging) {
+      // 未真正开始拖拽，清除状态
+      if (dragEl) {
+        removeClass(dragEl, this.options.chosenClass);
+      }
+      dragEl = null;
+      activeSortable = null;
+      return;
+    }
+
+    var self = this;
+    var opts = this.options;
+    var fromEl = startParent;
+    var toEl = cloneEl.parentNode;
+    var oldIndex = startIndex;
+    var newIndex = index(cloneEl);
+
+    // 恢复 dragEl 显示并放到最终位置
+    dragEl.style.display = '';
+    cloneEl.parentNode.insertBefore(dragEl, cloneEl);
+    cloneEl.parentNode.removeChild(cloneEl);
+    cloneEl = null;
+
+    // 清理 ghost
+    if (ghostEl && ghostEl.parentNode) {
+      ghostEl.parentNode.removeChild(ghostEl);
+    }
+    ghostEl = null;
+
+    removeClass(dragEl, opts.chosenClass);
+
+    // 判断事件类型
+    var isSameParent = fromEl === toEl;
+    var eventData = {
+      to: toEl,
+      from: fromEl,
+      item: dragEl,
+      newIndex: newIndex,
+      oldIndex: oldIndex,
+      clone: null
+    };
+
+    // 触发对应回调
+    if (!isSameParent) {
+      // 跨列表
+      if (typeof opts.onRemove === 'function' && fromEl === this.el) {
+        opts.onRemove.call(this, assign({}, eventData));
+      }
+      if (typeof opts.onAdd === 'function' && toEl === this.el) {
+        opts.onAdd.call(this, assign({}, eventData));
+      }
+    } else {
+      if (oldIndex !== newIndex) {
+        if (typeof opts.onUpdate === 'function') {
+          opts.onUpdate.call(this, assign({}, eventData));
+        }
+      }
+    }
+
+    if (typeof opts.onSort === 'function') {
+      opts.onSort.call(this, assign({}, eventData));
+    }
+
+    dispatchEvent(this.el, 'sortable:end', eventData);
+
+    if (typeof opts.onEnd === 'function') {
+      opts.onEnd.call(this, assign({}, eventData));
+    }
+
+    if (typeof opts.onUnchoose === 'function') {
+      opts.onUnchoose.call(this, dragEl, this);
+    }
+
+    isDragging = false;
+    dragEl = null;
+    activeSortable = null;
+    startParent = null;
+    startIndex = -1;
+  },
+
+  /**
+   * 检测鼠标下的目标 Sortable 实例
+   * @param {number} clientX
+   * @param {number} clientY
+   * @returns {Sortable|null}
+   * @private
+   */
+  _detectTargetSortable: function(clientX, clientY) {
+    var group = parseGroup(this.options.group);
+    var sortables = group.name ? getSortablesByGroup(group.name) : [this];
+
+    // 优先检测当前实例
+    var currentRect = getRect(this.el);
+    if (
+      clientX >= currentRect.left &&
+      clientX <= currentRect.right &&
+      clientY >= currentRect.top &&
+      clientY <= currentRect.bottom
+    ) {
+      return this;
+    }
+
+    // 检测其他实例
+    for (var i = 0; i < sortables.length; i++) {
+      var s = sortables[i];
+      if (s === this) continue;
+      var rect = getRect(s.el);
+      if (
+        clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom
+      ) {
+        return s;
+      }
+    }
+
+    return this;
+  },
+
+  /**
+   * 简单动画效果
+   * @param {HTMLElement} el
+   * @param {number} duration
+   * @private
+   */
+  _animate: function(el, duration) {
+    if (!duration) return;
+    addClass(el, 'sortable-animate');
+    setTimeout(function() {
+      removeClass(el, 'sortable-animate');
+    }, duration);
+  },
+
+  // ==================== 公共方法 ====================
+
+  /**
+   * 获取当前子元素顺序对应的 id/data-id 数组
+   * @param {string} [attr] - 属性名，默认取 data-id
+   * @returns {string[]}
+   */
+  toArray: function(attr) {
+    attr = attr || 'data-id';
+    var children = getChildren(this.el, this.options.draggable || '*');
+    return children.map(function(child) {
+      return child.getAttribute(attr) || '';
+    });
+  },
+
+  /**
+   * 根据 id 数组排序 DOM
+   * @param {string[]} order
+   * @param {string} [attr]
+   */
+  sort: function(order, attr) {
+    attr = attr || 'data-id';
+    var children = getChildren(this.el, this.options.draggable || '*');
+    var map = {};
+    for (var k = 0; k < children.length; k++) {
+      var c = children[k];
+      var id = c.getAttribute(attr);
+      if (id) map[id] = c;
+    }
+
+    for (var i = 0; i < order.length; i++) {
+      var child = map[order[i]];
+      if (child) {
+        this.el.appendChild(child);
+      }
+    }
+  },
+
+  /**
+   * 保存当前排序（触发 store）
+   */
+  save: function() {
+    var store = this.options.store;
+    if (store && store.set) {
+      store.set(this);
+    }
+  },
+
+  /**
+   * 销毁实例
+   */
+  destroy: function() {
+    if (this._unbindEvents) {
+      this._unbindEvents();
+      this._unbindEvents = null;
+    }
+    clearTimeout(this._delayTimer);
+    delete sortableInstances[this.id];
+    delete this.el._sortableInstance;
+  },
+
+  /**
+   * 获取/设置选项
+   * @param {string} name
+   * @param {*} [value]
+   * @returns {*}
+   */
+  option: function(name, value) {
+    if (value === undefined) {
+      return this.options[name];
+    }
+    this.options[name] = value;
+  },
+
+  /**
+   * 获取最近的 Sortable 祖先实例
+   * @param {HTMLElement} el
+   * @returns {Sortable|null}
+   */
+  closest: function(el) {
+    var current = el;
+    while (current) {
+      if (current._sortableInstance) {
+        return current._sortableInstance;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+};
+
+// 静态方法
+
+/**
+ * 获取元素关联的 Sortable 实例
+ * @param {HTMLElement} el
+ * @returns {Sortable|null}
+ */
+Sortable.get = function(el) {
+  return el && el._sortableInstance || null;
+};
+
+/**
+ * 创建实例
+ * @param {HTMLElement} el
+ * @param {Object} options
+ * @returns {Sortable}
+ */
+Sortable.create = function(el, options) {
+  return new Sortable(el, options);
+};
+
+export default Sortable;
+export { Sortable };