原生js封装了一个拖拽插件

11次阅读

共计 714 个字符,预计需要花费 2 分钟才能阅读完成。

虽然目前功能只有拖拽与限制拖拽范围,不过我会不断的更新功能。
ew-drag
一个基于原生 js 而封装的拖拽插件
安装与使用
安装
npm install ew-drag –save-dev

引入
<script src=”./release/bundle.js”></script>

然后允许默认配置与自定义配置,代码如下:
// 自定义配置
var drag = new ewDrag({
el: document.getElementsByClassName(‘demo’),// 拖动元素
isWindow: true,// 是否限制在浏览器可见窗口内, 如果为 false,超出后出现滚动条
scopeEl:document.getElementsByClassName(‘box’),// 如果和 width 与 height 同时设置了,则优先执行这个限制元素, 设置了此属性,则不能将 isWindow 属性设置为 false
width: 400,// 限制拖动元素范围宽,则不能将 isWindow 属性设置为 false
height: 400// 限制拖动元素范围高,则不能将 isWindow 属性设置为 false
});
// 其中 el 和 scopeEl 的值也可以是传成字符串, 如 el:’.demo’,scopeEl:’.box’
// 默认配置 (传入拖拽元素的 dom 对象或者获取 dom 对象的字符串)
var drag = new ewDrag(‘.demo’);
// 或 var drag = new ewDrag(document.getElementByClassName(‘demo’))

cdn 引入
CDN:https://www.unpkg.com/ew-drag…
github 源码。
欢迎 fork, 也望不吝啬 star。

正文完
 0