@shushujs/to-drag

说明

基于@howdyjs/to-drag开发，解决的问题为：父元素下进行拖拽时，tocontrolend等事件的回调参数中坐标不是父控件内的相对位置，而是绝对位置

原控件说明

ToDrag

设置Dom可拖动插件

特性

1. 将fixed元素设为可拖动
2. 提供不吸附、左右吸附、四方向吸附三种模式
3. 同时支持PC端和移动端
4. 封装了vue指令的形式
5. 新增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