- name: f-draggable title: 拖拽 attrs: - name: value type: any default: null description: 需要传递的值 - name: transfer type: string, Element options: - clone - self default: clone description: 拖拽时的移动元素。可选值：`'clone'`表示拖拽时拖起自身的一个拷贝，`'self'`表示拖拽时拖起自身，也可以直接传入一个元素，或者用slot来设置。 - name: immediate type: boolean default: false description: 是否在鼠标按下时立即拖拽。默认为`false`，是为了防止鼠标单击等事件频繁触发拖拽操作。 - name: disabled type: boolean default: false description: 是否禁用 - name: constraint type: function default: ... description: 拖拽时移动路径的约束函数。需要传入一个对象，至少要包含：`startLeft`、`startTop`、`dragX`、`dragY`几个字段 slots: - concept: Slot name: default description: 插入需要拖拽的元素，仅一个。 - concept: Slot name: transfer description: 自定义的移动元素。 events: - name: dragstart description: 拖拽开始时触发 params: - name: $event.originVM type: VueComponent description: 拖拽源，为当前的`` - name: $event.sourceEl type: Element description: 拖拽起始元素 - name: $event.transferEl type: Element description: 拖拽移动元素 - name: $event.value type: any description: 需要传递的值 - name: $event.screenX type: number description: 鼠标指针相对于屏幕的水平坐标 - name: $event.screenY type: number description: 鼠标指针相对于屏幕的垂直坐标 - name: $event.clientX type: number description: 鼠标指针相对于浏览器的水平坐标 - name: $event.clientY type: number description: 鼠标指针相对于浏览器的垂直坐标 - name: $event.pageX type: number description: 鼠标指针相对于页面的水平坐标 - name: $event.pageY type: number description: 鼠标指针相对于页面的垂直坐标 - name: $event.startX type: number description: 拖拽开始时鼠标指针的水平坐标 - name: $event.startY type: number description: 拖拽开始时鼠标指针的垂直坐标 - name: $event.dragX type: number description: 拖拽时鼠标指针相对于起始坐标的水平位移 - name: $event.dragY type: number description: 拖拽时鼠标指针相对于起始坐标的垂直位移 - name: $event.startLeft type: number description: 拖拽开始时代理元素的left值 - name: $event.startTop type: number description: 拖拽开始时代理元素的top值 - name: $event.left type: number description: 拖拽时代理元素的left值 - name: $event.top type: number description: 拖拽时代理元素的top值 - name: $event.preventDefault type: Function description: 阻止拖拽流程 - name: senderVM type: FDraggable description: 发送事件实例 - name: drag description: 正在拖拽时触发 params: - name: $event.originVM type: VueComponent description: 拖拽源，为当前的`` - name: $event.sourceEl type: Element description: 拖拽起始元素 - name: $event.transferEl type: Element description: 拖拽移动元素 - name: $event.value type: any description: 需要传递的值 - name: $event.screenX type: number description: 鼠标指针相对于屏幕的水平坐标 - name: $event.screenY type: number description: 鼠标指针相对于屏幕的垂直坐标 - name: $event.clientX type: number description: 鼠标指针相对于浏览器的水平坐标 - name: $event.clientY type: number description: 鼠标指针相对于浏览器的垂直坐标 - name: $event.pageX type: number description: 鼠标指针相对于页面的水平坐标 - name: $event.pageY type: number description: 鼠标指针相对于页面的垂直坐标 - name: $event.startX type: number description: 拖拽开始时鼠标指针的水平坐标 - name: $event.startY type: number description: 拖拽开始时鼠标指针的垂直坐标 - name: $event.dragX type: number description: 拖拽时鼠标指针相对于起始坐标的水平位移 - name: $event.dragY type: number description: 拖拽时鼠标指针相对于起始坐标的垂直位移 - name: $event.startLeft type: number description: 拖拽开始时代理元素的left值 - name: $event.startTop type: number description: 拖拽开始时代理元素的top值 - name: $event.left type: number description: 拖拽时代理元素的left值 - name: $event.top type: number description: 拖拽时代理元素的top值 - name: $event.preventDefault type: Function description: 阻止拖拽流程 - name: senderVM type: FDraggable description: 发送事件实例 - name: dragend description: 拖拽结束时触发 params: - name: $event.originVM type: VueComponent description: 拖拽源，为当前的`` - name: $event.sourceEl type: Element description: 拖拽起始元素 - name: $event.transferEl type: Element description: 拖拽移动元素 - name: $event.value type: any description: 需要传递的值 - name: senderVM type: FDraggable description: 发送事件实例 methods: - name: cancel description: 取消拖拽。 params: []