開源自己寫的一個拖拽庫，兼容到IE8

20171112 發(fā)布于2019-08-01 16:50 / 3320人閱讀

摘要：打造跨平臺的輕量級原生拖拽庫自己寫的一個拖拽庫，基于原生實現，無任何依賴，同時還做了的兼容，在的情況下回退到實現。

github地址：https://github.com/qiangzi772...

目前這個庫的兼容做到了兼容IE8，所以如果需要兼容IE8的朋友不妨試試。庫里面寫了很多的注釋，對于想看源碼的同學是一個很好的選擇。如果覺得不錯可以到github上點個star，謝謝各位了。
庫的思路部分參考draggabilly的實現，但是因為draggabilly也依賴了幾個小的庫，導致源碼有點臃腫，作者也沒去優(yōu)化，所以我就有個這個想法，寫一個新的拖拽庫，兼容到IE8。

Draggable

打造跨平臺的輕量級原生拖拽庫

Summary

自己寫的一個拖拽庫，基于原生JS實現，無任何依賴，同時還做了IE8的兼容，在IE8的情況下transform回退到position實現。拖拽的動畫通過綁定在render函數上的requestAnimationFrame實現而不是使用mousemove回調。另外庫里面還寫了很多的注釋，方便對源碼的解讀與交流。如果你覺得這個庫寫的不錯或者有值得學習的經驗不妨點下右上角的star，謝謝各位。

Install

直接從src文件夾中引入即可

Usage

可以直接傳入選擇器

new Draggable("#app");

或者傳入DOM節(jié)點

var elem=document.querySelector("#app");
new Draggable(elem);

如果需要為多個元素添加拖拽，請循環(huán)遍歷

var elem=document.querySelectorAll(".app");
for(var i=0,len=elem.length;i
API
API一覽
new Draggable("#app",{
    parentMove:"#container",
    backToPosition:false,
    axis:"x",
    grid:{x:40},
    addClassName:"is-dragging",
    cursorCancel:false,
});

backToPosition
默認的拖拽動畫是通過transform屬性實現的，所以如果想使用position屬性實現拖拽動畫可以使用該參數
new Draggable("#app",{
    backToPosition:true
});

在IE8下會自動使用position實現拖拽
parentMove
通過設置parentMove可以設置移動的父元素，如
new Draggable("#app",{
    parentMove:"#container"
});

表明當點擊app元素時，app元素不會被拖拽，拖拽移動的是整個的container元素，這個API在需要定義頂部拖拽條的時候很有用
axis
設置該參數表明只允許某個方向可拖拽
new Draggable("#app",{
    axis:"x"
});

grid
設置拖拽的時候移動的單位
new Draggable("#app",{
    grid:{x:40,y:40}
});

addClassName
為拖拽的過程添加className，方便增加拖拽樣式
new Draggable("#app",{
    addClassName:"is-dragging"
});

cursor
在初始化的時候默認為可拖拽的元素添加cursor:move屬性，如果需要取消可以
new Draggable("#app",{
    cursorCancel:true
});

后期版本迭代

增加AMD規(guī)范。

增加事件綁定接口。

添加完善的錯誤輸出，方便調試。

加上zIndex接口，讓移動元素總在最頂層。

GPU云服務器云服務器拖拽庫 ie8兼容性 ie8不兼容js哪些 ie8中js不兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50776.html

開源自己寫的一個拖拽庫，兼容到IE8

摘要：打造跨平臺的輕量級原生拖拽庫自己寫的一個拖拽庫，基于原生實現，無任何依賴，同時還做了的兼容，在的情況下回退到實現。 github地址：https://github.com/qiangzi772... 目前這個庫的兼容做到了兼容IE8，所以如果需要兼容IE8的朋友不妨試試。庫里面寫了很多的注釋，對于想看源碼的同學是一個很好的選擇。如果覺得不錯可以到github上點個star，謝謝各位了。...

fxp 2019-08-20 16:33 評論0 收藏0
開源自己寫的圖片轉Ascii碼圖工具

摘要：地址如果覺得不錯可以給個或者提出你的建議，基于的圖片轉示意圖。瓶頸目前項目的瓶頸存在于這個插件，把圖片轉成碼在瀏覽器中輸出是十分快速的，但是后期將輸出的碼轉換成圖片時，使用了插件，這個插件在轉換圖片的過程中十分緩慢，導致最后的輸出緩慢。 GitHub地址：https://github.com/qiangzi772... 如果覺得不錯可以給個star或者提出你的建議 img2Ascii...

Yangyang 2019-08-20 17:53 評論0 收藏0
開源自己寫的圖片轉Ascii碼圖工具

摘要：地址如果覺得不錯可以給個或者提出你的建議，基于的圖片轉示意圖。瓶頸目前項目的瓶頸存在于這個插件，把圖片轉成碼在瀏覽器中輸出是十分快速的，但是后期將輸出的碼轉換成圖片時，使用了插件，這個插件在轉換圖片的過程中十分緩慢，導致最后的輸出緩慢。 GitHub地址：https://github.com/qiangzi772... 如果覺得不錯可以給個star或者提出你的建議 img2Ascii...

寵來也 2019-08-01 17:07 評論0 收藏0