cloud-ui.vusion

# FDragger 拖拽器 - [示例](#示例) - [基本用法](#基本用法) - [轴向约束](#轴向约束) - [网格约束](#网格约束) - [范围约束](#范围约束) - [范围约束模式](#范围约束模式) - [API]() - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) ## 示例 ### 基本用法 ``` html <f-dragger> <u-block size="normal" style="position: relative;">拖我</u-block> </f-dragger> ``` ### 轴向约束 ``` html <f-dragger axis="horizontal"> <u-block size="normal" inline style="position: relative;">水平</u-block> </f-dragger> <f-dragger axis="vertical"> <u-block size="normal" inline style="position: relative;">垂直</u-block> </f-dragger> ``` ### 网格约束 ``` html <f-dragger :grid="{ x: 40, y: 30 }"> <u-block size="normal" color="primary" inline style="position: relative;">网格</u-block> </f-dragger> ``` ### 范围约束 ``` vue <template> <div> <div :class="$style.well"> <f-dragger :range="{ left: 0, top: 0, right: 200, bottom: 200 }"> <u-block :class="$style.block" size="normal" color="primary" inline>object</u-block> </f-dragger> </div> <div :class="$style.well"> <f-dragger range="offset-parent"> <u-block :class="$style.block" size="normal" color="primary" inline>offset-parent</u-block> </f-dragger> </div> </div> </template> <style module> .well { display: inline-block; position: relative; vertical-align: bottom; width: 300px; height: 300px; padding: 20px; background: #f4f4f4; border: 2px solid #ccc; } .block { position: absolute; } </style> ``` ### 范围约束模式 ``` vue <template> <div> <div :class="$style.well"> <f-dragger range="offset-parent" range-mode="inside"> <u-block :class="$style.block" size="normal" color="primary" inline>object</u-block> </f-dragger> </div> <div :class="$style.well"> <f-dragger range="offset-parent" range-mode="center"> <u-block :class="$style.block" range-mode="center" size="normal" color="primary" inline>offset-parent</u-block> </f-dragger> </div> </div> </template> <style module> .well { display: inline-block; position: relative; vertical-align: bottom; width: 300px; height: 300px; padding: 20px; background: #f4f4f4; border: 2px solid #ccc; } .block { position: absolute; } .block[range-mode="center"] { margin-left: -32px; margin-top: -32px; } </style> ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | axis | string | | `'both'` | 拖拽时移动路径的约束轴向。可选值：`both`表示可以在任意方向上移动、`horizontal`表示限制在水平方向上移动、`vertical`表示限制在垂直方向上移动。 | | grid | object | | `'{ x: 0, y: 0 }'` | f拖拽时移动路径的约束网格。值为一个{x,y}格式的对象，表示水平方向和垂直方向网格的大小。 | | range | string, object | | | 拖拽范围。值可以为一个{left,top,right,bottom}格式的对象，表示代理元素移动的上下左右边界。当值为`offset-parent`，代理元素限制在offsetParent中移动，仅适用于`position`为`absolute`的情况。 | | range-mode | string | | `'inside'` | 拖拽范围模式。可选值：`inside`表示在拖拽范围内侧移动，`center`表示在拖拽范围边缘及内侧移动，`outside`表示在拖拽范围外侧及内侧移动。 | | value | any | | | 需要传递的值 | | transfer | string, Element | | `'self'` | 拖拽时的移动元素。可选值：`'clone'`表示拖拽时拖起自身的一个拷贝，`'self'`表示拖拽时拖起自身，也可以直接传入一个元素，或者用slot来设置。 | | immediate | boolean | | `false` | 是否在鼠标按下时立即拖拽。默认为`false`，是为了防止鼠标单击等事件频繁触发拖拽操作。 | | disabled | boolean | | `false` | 是否禁用 | ### Slots #### (default) 插入需要拖拽的元素，仅一个。 #### transfer 自定义的移动元素。 ### Events #### @dragstart 拖拽开始时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.originVM | VueComponent | 拖拽源，为当前的`<f-draggable>` | | $event.sourceEl | Element | 拖拽起始元素 | | $event.transferEl | Element | 拖拽移动元素 | | $event.value | any | 需要传递的值 | | $event.screenX | number | 鼠标指针相对于屏幕的水平坐标 | | $event.screenY | number | 鼠标指针相对于屏幕的垂直坐标 | | $event.clientX | number | 鼠标指针相对于浏览器的水平坐标 | | $event.clientY | number | 鼠标指针相对于浏览器的垂直坐标 | | $event.pageX | number | 鼠标指针相对于页面的水平坐标 | | $event.pageY | number | 鼠标指针相对于页面的垂直坐标 | | $event.startX | number | 拖拽开始时鼠标指针的水平坐标 | | $event.startY | number | 拖拽开始时鼠标指针的垂直坐标 | | $event.dragX | number | 拖拽时鼠标指针相对于起始坐标的水平位移 | | $event.dragY | number | 拖拽时鼠标指针相对于起始坐标的垂直位移 | | $event.startLeft | number | 拖拽开始时代理元素的left值 | | $event.startTop | number | 拖拽开始时代理元素的top值 | | $event.left | number | 拖拽时代理元素的left值 | | $event.top | number | 拖拽时代理元素的top值 | | $event.preventDefault | Function | 阻止拖拽流程 | | senderVM | FDragger | 发送事件实例 | #### @drag 正在拖拽时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.originVM | VueComponent | 拖拽源，为当前的`<f-draggable>` | | $event.sourceEl | Element | 拖拽起始元素 | | $event.transferEl | Element | 拖拽移动元素 | | $event.value | any | 需要传递的值 | | $event.screenX | number | 鼠标指针相对于屏幕的水平坐标 | | $event.screenY | number | 鼠标指针相对于屏幕的垂直坐标 | | $event.clientX | number | 鼠标指针相对于浏览器的水平坐标 | | $event.clientY | number | 鼠标指针相对于浏览器的垂直坐标 | | $event.pageX | number | 鼠标指针相对于页面的水平坐标 | | $event.pageY | number | 鼠标指针相对于页面的垂直坐标 | | $event.startX | number | 拖拽开始时鼠标指针的水平坐标 | | $event.startY | number | 拖拽开始时鼠标指针的垂直坐标 | | $event.dragX | number | 拖拽时鼠标指针相对于起始坐标的水平位移 | | $event.dragY | number | 拖拽时鼠标指针相对于起始坐标的垂直位移 | | $event.startLeft | number | 拖拽开始时代理元素的left值 | | $event.startTop | number | 拖拽开始时代理元素的top值 | | $event.left | number | 拖拽时代理元素的left值 | | $event.top | number | 拖拽时代理元素的top值 | | $event.preventDefault | Function | 阻止拖拽流程 | | senderVM | FDragger | 发送事件实例 | #### @dragend 拖拽结束时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.originVM | VueComponent | 拖拽源，为当前的`<f-draggable>` | | $event.sourceEl | Element | 拖拽起始元素 | | $event.transferEl | Element | 拖拽移动元素 | | $event.value | any | 需要传递的值 | | senderVM | FDragger | 发送事件实例 | Methods #### cancel() 取消拖拽。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |