您好,登錄后才能下訂單哦!
本篇文章為大家展示了兼容移動手機的js拖拽庫Draggin.js怎么用,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
Draggin.js是一款兼容移動手機的js拖拽庫。該js拖拽庫的特點是跨平臺,體積小,運行速度快。它是一個完全跨平臺的Javascript庫,用于輕松快速地創建交互式用戶界面。
該js拖拽庫會自動計算元素相對于文檔左上角的位置,然后通過CSS transform屬性將它重新定位。
Draggin.js拖拽庫的特點還有:
輕量級,壓縮后的版本僅3k。完全兼容移動觸摸設備。使用時不需要編寫任何js代碼。插件利用GPU提高性能。沒有任何外部依賴文件,純原生js腳本。
在頁面中引入draggin.min.js文件。
<script src="draggin.min.js"></script>
不要將此腳本包含在頁面的<head>中。 Draggin.js必須在整個頁面呈現后才能運行,因此請將其包含在<body>標記的最后。 這比在<head>中包含腳本更好。
Draggin.js設計時考慮到了簡單性。 一旦將腳本包含在頁面中,您所要做的就是呈現一個元素并賦予其一個class名稱叫:draggable,即可實現拖拽,如:
<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>
如果想要實現單擊拖動,雙擊編輯的功能,可以這樣:
<h2 class="draggable text">Both tags work at the same time!</h2>
上述內容就是兼容移動手機的js拖拽庫Draggin.js怎么用,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。