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

資訊專欄INFORMATION COLUMN

開(kāi)源自己寫(xiě)的一個(gè)拖拽庫(kù)，兼容到IE8

fxp / 911人閱讀

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

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

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

Draggable

打造跨平臺(tái)的輕量級(jí)原生拖拽庫(kù)

Summary

自己寫(xiě)的一個(gè)拖拽庫(kù)，基于原生JS實(shí)現(xiàn)，無(wú)任何依賴，同時(shí)還做了IE8的兼容，在IE8的情況下transform回退到position實(shí)現(xiàn)。拖拽的動(dòng)畫(huà)通過(guò)綁定在render函數(shù)上的requestAnimationFrame實(shí)現(xiàn)而不是使用mousemove回調(diào)。另外庫(kù)里面還寫(xiě)了很多的注釋，方便對(duì)源碼的解讀與交流。如果你覺(jué)得這個(gè)庫(kù)寫(xiě)的不錯(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è)元素添加拖拽，請(qǐng)循環(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)畫(huà)是通過(guò)transform屬性實(shí)現(xiàn)的，所以如果想使用position屬性實(shí)現(xiàn)拖拽動(dòng)畫(huà)可以使用該參數(shù)


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



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

parentMove

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


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



表明當(dāng)點(diǎn)擊app元素時(shí)，app元素不會(huì)被拖拽，拖拽移動(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

為拖拽的過(guò)程添加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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • 開(kāi)源自己寫(xiě)的一個(gè)拖拽庫(kù)，兼容到IE8

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

    20171112 評(píng)論0 收藏0

  • 開(kāi)源自己寫(xiě)的圖片轉(zhuǎn)Ascii碼圖工具

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

    Yangyang 評(píng)論0 收藏0

  • 開(kāi)源自己寫(xiě)的圖片轉(zhuǎn)Ascii碼圖工具

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

    寵來(lái)也 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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