原生js封裝了一個拖拽插件

雖然目前功能只有拖拽與限制拖拽範圍,不過我會不斷的更新功能。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章