@howdyjs/to-drag NPM

ToDrag

Version Size

设置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
  }
}