Admin.UI/src/directive/draggable.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

// 复用element-ui的dom处理函数
import { addClass, removeClass, setStyle } from 'element-ui/lib/utils/dom'

// 需要继承Events
import Events from '@/utils/events'

// 拖拽容器的className
const DRAGGABLE_CLASS = 'my-draggable'

// 拖拽句柄的元素className
const DRAGGABLE_HANDLE_CLASS = 'my-draggable__handle'

// 元素正在拖拽中得className
const DRAGGING_CLASS = 'my-draggable--dragging'

// 元素克隆后的元素className
const CLONE_CLASS = 'my-draggable__clone'

// 元素克隆后元素过渡动画className
const CLONE_TRANSLATE = 'my-draggable__clone--translate'

// 禁止页面选择className
const USER_SELECT_NONE = 'user-select--none'

// 空函数
const noop = function() {
}

/**
 * 拖拽类实例化默认参数
 * @const
 * @type {object}
 * @property {string} [host=null] 宿主元素选择器
 * @property {string} [handle=null] 拖拽句柄元素选择器
 * @property {string} [axis=null] 限制拖拽方向可选: v 垂直、h 水平，默认不限制
 * @property {number} [delay=100] 延时开始拖拽
 * @property {Object} [range={}] 限制拖拽范围
 * @property {number} [range.left=-10000] x坐标位置
 * @property {number} [range.top=-10000] y坐标位置
 * @property {number} [range.width=10000] 最大宽度
 * @property {number} [range.height=10000] 最大高度
 * @property {Object} [offset={}] 位置定义
 * @property {string} [offset.left=left] x位置名称
 * @property {string} [offset.top=top] y位置名称
 * @property {Object} [autoCalcRange={}] 自动计算范围
 * @property {HTMLElement} [target=null] 限制在元素范围内拖拽
 * @property {boolean|function} [clone=false] 克隆拖拽对象，可以是函数返回HtmlElement
 * @property {boolean} [revert=true] 拖拽放置后动画返回原来位置，clone不为false时才有效
 * @property {string} [group=null] 分组名称， 与droppable配合使用
 * @property {function} [onStartDrag] 开始拖拽时回调
 * @property {function} [onStopDrag] 结束拖拽时回调
 * @property {function} [onDrag] 正在拖拽时回调
 */
const defaultOptions = {
  // 宿主元素选择器
  host: null,

  // 拖拽句柄元素选择器
  handle: null,