? Github Star: 21.9k[1]
? 官網[2]
Dragula.js —— 一個為開發者設計的拖放庫，它以簡潔的代碼和強大的功能，讓你的應用交互更加流暢和直觀。
1、Dragula.js 是什么？
Dragula.js 是一個用于拖放操作的 JavaScript 庫，允許開發者實現元素的拖放功能。由 Google 的軟件工程師 Matthew Rothenberg 開發，設計初衷是為了簡化拖放操作的開發過程，使得開發者可以專注于應用的其他方面。 Dragula.js 具有以下幾個特點：
? 簡潔的API：它提供了一個非常簡潔的API，使得拖放操作非常容易實現。
? 輕量級：庫的大小很小，不會增加頁面的加載時間。
? 模塊化：Dragula.js 可以很容易地與其他庫和框架集成，如 React、Angular 等。
? 響應式：它支持響應式設計，確保在不同屏幕尺寸的設備上都能正常工作。
? 自定義：開發者可以根據需要自定義拖放的行為和樣式。
2、快速開始
安裝
在項目中，可以通過 npm 安裝。
npm install dragula -S
# yarn
yarn add dragula
如果你沒有使用包管理工具，可以通過下載 Github 倉庫中的 dist 文件夾中的 dragula 來使用。注意將 js 文件放在 <body> 中，還要引入 CSS 文件。
示例
首先，引入 Dragula 文件，
<link rel="stylesheet" href="./dragula/dist/dragula.css" />
<script src="./dragula/dist/dragula.js"></script>
Dragula 提供了簡單的 API，可以方便的實現拖拽。首先定義 DOM 結構，
<div class="wrapper">
<div id="left-defaults" class="container">
<div>1. 可以在兩個列表之間移動元素</div>
<div>2. 可以移動到任意位置</div>
<div>3. 任何元素都可以被移動</div>
</div>
<div id="right-defaults" class="container">
<div>A. 你可以在同一個容器中移動元素，改變它的位置</div>
<div>B. 這是默認用例。</div>
<div>C. 提供很多配置項</div>
</div>
</div>
實現兩個容器元素之間的拖動，只需調用 dragula 函數即可。示例中允許用戶將元素 left 拖到 right ， right 拖到 left 。
dragula([$('left-defaults'), $('right-defaults')])
function $(id) {
return document.getElementById(id)
}
實現效果如下：
3、更多配置
上面示例中，我們沒有向 Dragula 函數傳遞任何 Options 屬性，其實他提供了一個默認的 Options 對象。
dragula(containers, {
// 判斷元素是否是容器，返回 false 表示只有 `drake.containers` 中的元素才會被考慮作為容器
isContainer: function (el) {
return false;
},
// 判斷元素是否可以移動，返回 true 表示默認情況下所有元素都是可拖動的
moves: function (el, source, handle, sibling) {
return true;
},
// 判斷元素是否可以被放置在目標容器中，返回 true 表示默認情況下元素可以被放置在任何 `containers` 中
accepts: function (el, target, source, sibling) {
return true;
},
// 判斷元素是否應該被阻止拖動，返回 false 表示默認情況下不會阻止任何元素的拖動
invalid: function (el, handle) {
return false;
},
// 確定拖動方向，'vertical' 表示在確定元素放置位置時，只考慮 Y 軸方向
direction: 'vertical',
// 是否復制元素，默認為 false，表示移動元素而不是復制
copy: false,
// 是否允許在復制源容器中重新排序元素，默認為 false
copySortSource: false,
// 如果元素在拖動過程中溢出容器，是否將其恢復到拖動前的位置，默認為 false
revertOnSpill: false,
// 如果元素在拖動過程中溢出容器，是否將其從 DOM 中移除，默認為 false
removeOnSpill: false,
// 設置鏡像元素（拖動時顯示的元素）應該附加到的元素，默認為 document.body
mirrorContainer: document.body,
// 是否忽略輸入框中的文本選擇，設置為 true 允許用戶選擇輸入框中的文本，而不會觸發拖動
ignoreInputTextSelection: true,
// 設置在 X 軸上移動多少距離后才認為是拖動而不是點擊，默認為 0
slideFactorX: 0,
// 設置在 Y 軸上移動多少距離后才認為是拖動而不是點擊，默認為 0
slideFactorY: 0
});
4、總結
Dragula.js 是一個輕量級、高性能的拖放庫，它以簡潔的 API 和強大的功能集，為現代網頁應用帶來了流暢而直觀的拖拽體驗。希望本期推薦能幫到你！
祝好！
引用鏈接
[1] Github Star: 21.9k: https://github.com/bevacqua/dragula
[2] 官網: https://bevacqua.github.io/dragula/
該文章在 2024/10/12 9:36:01 編輯過
400 186 1886
