兼容移動(dòng)手機(jī)的js拖拽庫(kù)Draggin.js怎么用

發(fā)布時(shí)間：2021-12-14 13:48:30 來源：億速云閱讀：363 作者：柒染欄目：開發(fā)技術(shù)

本篇文章為大家展示了兼容移動(dòng)手機(jī)的js拖拽庫(kù)Draggin.js怎么用，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

Draggin.js是一款兼容移動(dòng)手機(jī)的js拖拽庫(kù)。該js拖拽庫(kù)的特點(diǎn)是跨平臺(tái)，體積小，運(yùn)行速度快。它是一個(gè)完全跨平臺(tái)的Javascript庫(kù)，用于輕松快速地創(chuàng)建交互式用戶界面。

該js拖拽庫(kù)會(huì)自動(dòng)計(jì)算元素相對(duì)于文檔左上角的位置，然后通過CSS transform屬性將它重新定位。

Draggin.js拖拽庫(kù)的特點(diǎn)還有：

輕量級(jí)，壓縮后的版本僅3k。完全兼容移動(dòng)觸摸設(shè)備。使用時(shí)不需要編寫任何js代碼。插件利用GPU提高性能。沒有任何外部依賴文件,純?cè)鷍s腳本。

在頁(yè)面中引入draggin.min.js文件。

<script src="draggin.min.js"></script>

不要將此腳本包含在頁(yè)面的<head>中。 Draggin.js必須在整個(gè)頁(yè)面呈現(xiàn)后才能運(yùn)行，因此請(qǐng)將其包含在<body>標(biāo)記的最后。這比在<head>中包含腳本更好。

Draggin.js設(shè)計(jì)時(shí)考慮到了簡(jiǎn)單性。一旦將腳本包含在頁(yè)面中，您所要做的就是呈現(xiàn)一個(gè)元素并賦予其一個(gè)class名稱叫：draggable，即可實(shí)現(xiàn)拖拽，如：

<h2 class="draggable">Hello, World!</h2>

如果要使用Draggin.js的文本編輯功能，可以給元素添加class名稱叫：text即可，例如：

<h2 class="text">Hello, World!</h2><p class="text">Hello, World!</p><a href="#" class="text">Hello, World!</a><p class="text">Hello, World!</p>

如果想要實(shí)現(xiàn)單擊拖動(dòng)，雙擊編輯的功能，可以這樣：

<h2 class="draggable text">Both tags work at the same time!</h2>

上述內(nèi)容就是兼容移動(dòng)手機(jī)的js拖拽庫(kù)Draggin.js怎么用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

猜你喜歡