成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

fxp / 951人閱讀

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

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

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

Draggable

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

Summary

自己寫的一個拖拽庫，基于原生JS實現(xiàn)，無任何依賴，同時還做了IE8的兼容，在IE8的情況下transform回退到position實現(xiàn)。拖拽的動畫通過綁定在render函數(shù)上的requestAnimationFrame實現(xiàn)而不是使用mousemove回調(diào)。另外庫里面還寫了很多的注釋，方便對源碼的解讀與交流。如果你覺得這個庫寫的不錯或者有值得學習的經(jīng)驗不妨點下右上角的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屬性實現(xiàn)的，所以如果想使用position屬性實現(xiàn)拖拽動畫可以使用該參數(shù)


new Draggable("#app",{
    backToPosition:true
});



在IE8下會自動使用position實現(xiàn)拖拽

parentMove

通過設(shè)置parentMove可以設(shè)置移動的父元素，如


new Draggable("#app",{
    parentMove:"#container"
});



表明當點擊app元素時，app元素不會被拖拽，拖拽移動的是整個的container元素，這個API在需要定義頂部拖拽條的時候很有用

axis

設(shè)置該參數(shù)表明只允許某個方向可拖拽


new Draggable("#app",{
    axis:"x"
});


grid

設(shè)置拖拽的時候移動的單位


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ī)范。


增加事件綁定接口。


添加完善的錯誤輸出，方便調(diào)試。


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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83000.html

相關(guān)文章

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

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

    20171112 評論0 收藏0

  • 開源自己寫的圖片轉(zhuǎn)Ascii碼圖工具

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

    Yangyang 評論0 收藏0

  • 開源自己寫的圖片轉(zhuǎn)Ascii碼圖工具

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

    寵來也 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<