雖然目前功能只有拖拽與限制拖拽範圍,不過我會不斷的更新功能。
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...
歡迎fork
,也望不吝嗇star
。