成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

20171112 / 3326人閱讀

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

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

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

Draggable

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

Summary

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

Install

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

Usage

可以直接傳入選擇器

new Draggable("#app");

或者傳入DOM節(jié)點(diǎn)

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

如果需要為多個(gè)元素添加拖拽，請循環(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

默認(rèn)的拖拽動(dòng)畫是通過transform屬性實(shí)現(xiàn)的，所以如果想使用position屬性實(shí)現(xiàn)拖拽動(dòng)畫可以使用該參數(shù)


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



在IE8下會自動(dòng)使用position實(shí)現(xiàn)拖拽

parentMove

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


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



表明當(dāng)點(diǎn)擊app元素時(shí)，app元素不會被拖拽，拖拽移動(dòng)的是整個(gè)的container元素，這個(gè)API在需要定義頂部拖拽條的時(shí)候很有用

axis

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


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


grid

設(shè)置拖拽的時(shí)候移動(dòng)的單位


new Draggable("#app",{
    grid:{x:40,y:40}
});


addClassName

為拖拽的過程添加className，方便增加拖拽樣式


new Draggable("#app",{
    addClassName:"is-dragging"
});


cursor

在初始化的時(shí)候默認(rèn)為可拖拽的元素添加cursor:move屬性，如果需要取消可以


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


后期版本迭代


增加AMD規(guī)范。


增加事件綁定接口。


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


加上zIndex接口，讓移動(dòng)元素總在最頂層。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50776.html

相關(guān)文章

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

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

    fxp 評論0 收藏0

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

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

    Yangyang 評論0 收藏0

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

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

    寵來也 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<