说明
基于@howdyjs/to-drag开发,解决的问题为:父元素下进行拖拽时,tocontrolend等事件的回调参数中坐标不是父控件内的相对位置,而是绝对位置
原控件说明
ToDrag
设置Dom可拖动插件
特性
- 将fixed元素设为可拖动
- 提供不吸附、左右吸附、四方向吸附三种模式
- 同时支持PC端和移动端
- 封装了vue指令的形式
- 新增Absolute模式,控制absolute元素在其父元素盒子下进行拖拽
原生使用
import ToDrag from '@howdyjs/to-drag'
new ToDrag({
el: '#to-drag', // Selector or Dom
options: {
// Your Options
// 参考下方说明
}
});
- UMD CDN: https://unpkg.com/@howdyjs/to-drag/dist/index.umd.js
- UMD Name:
HowdyToDrag
- UMD Example: Click Here
Options (Objcet)
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
moveCursor | 是否显示移动光标(cursor: move) | Boolean | - | true |
adsorb | 是否开启边缘吸附,默认为不开启,设为1则为左右吸附,设为2为四方向吸附 | Number | 0/1/2 | 0 |
adsorbOffset | 开启吸附后,吸附边缘的偏移量,单位为px | Number | - | 0 |
transitionDuration | 吸附动画的过渡效果的持续时间,单位为ms | Number | - | 400 |
transitionTimingFunction | 吸附动画的过渡效果的动画曲线 | String | - | ease-in-out |
forbidBodyScroll | 默认开启,处理移动端滚动穿透问题,当前使用设置body的overflow实现,设为false时需自行处理滚动穿透问题 | Boolean | - | true |
isAbsolute | 是否为Absolute模式,v1.5.0后新增,可控制absolute的元素在其父元素下进行拖拽,开启该模式暂不支持吸附功能 | Boolean | - | false |
parentSelector | Absolute模式下元素的父级容器,目前只支持传入字符串选择器 | String | - | - |
positionMode | 定位模式,默认会记录top与left值,更改此值可以定位方向(1: top/left, 2: top/right, 3: bottom/left, 4: bottom/right) | Number | 1,2,3,4 | 1 |
disabled | 是否禁用,需传入函数返回Boolean | Function: () => boolean | - | - |
Event
- todraginit:初始化完成事件
- todragstart: 拖拽开始事件
- todragmove:拖拽移动事件
- todragend:拖拽结束时间
它们都提供以下的回调参数:
- width:当前拖拽元素的宽
- height:当前拖拽元素的宽
- top:当前拖拽元素的上偏移
- left:当前拖拽元素的左偏移
- bottom: 当前拖拽元素的下偏移
- right:当前拖拽元素的右偏移
- maxX:当前屏幕的宽度(不包含滚动条)
- maxY:当前屏幕的高度(不包含滚动条)
一般在回调中将位置信息记录到 localstorage,在下一次初始化时填入用户上一次最后移动的信息。
以Vue指令方式使用
import { ToDragDirective } from '@howdyjs/to-drag'
// Vue3全局引入
app.use(ToDragDirective, someGlobalOptions)
// Vue2全局引入(对vue2做了兼容)
Vue.use(ToDragDirective, someGlobalOptions)
// 组件内引入
export default {
directive: {
'to-drag': ToDragDirective
}
}
指令Value (Objcet)
参数同上方的配置Options