聲明
本人也在不斷的學(xué)習(xí)和積累中，文章中有不足和誤導(dǎo)的地方還請(qǐng)見諒，可以給我留言指正吱窝。希望和大家共同進(jìn)步，共建和諧學(xué)習(xí)環(huán)境迫靖。
特征
- 超級(jí)容易設(shè)置
- 沒有臃腫的依賴
- 自己計(jì)算排序順序
- 物品將被丟棄的陰影提供視覺反饋
- 觸摸事件院峡！
- 無需任何配置即可無縫處理點(diǎn)擊
安裝
1、npm安裝
npm install dragula --save
2系宜、bower安裝
bower install dragula --save
3照激、CDN
<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/$VERSION/dragula.min.js'></script>
注：最好放在<body>中引用，不要放在<head>中盹牧。
css
需要引入一些css樣式俩垃，在頁面中引入dist/dragula.css或dist/dragula.min.css，如果你使用的是Stylus汰寓，你可以這樣引入
@import 'node_modules/dragula/dragula'
方法
dragula(containers?, options?)
dragula 允許在containers中間互相拖動(dòng)口柳，如果拖動(dòng)到containers之外的元素時(shí)，會(huì)根據(jù) revertOnSpill 和removeOnSpill 的配置終止操作有滑。
請(qǐng)注意跃闹，拖動(dòng)僅在左鍵單擊時(shí)觸發(fā)
下面的示例允許用戶將元素從中l(wèi)eft拖入right和從中right拖入left
dragula([document.querySelector('#left'), document.querySelector('#right')]);
您還可以提供一個(gè)options對(duì)象。以下是默認(rèn)值的介紹
dragula(containers, {
isContainer: function (el) {
return false; // 點(diǎn)擊和拖動(dòng)都會(huì)觸發(fā)毛好，drake.containers元素將被考慮
},
moves: function (el, source, handle, sibling) {
return true; // 一直能拖動(dòng)望艺，拖動(dòng)時(shí)觸發(fā)
},
accepts: function (el, target, source, sibling) {
return true; // 元素可以放在任何`container`中
},
invalid: function (el, handle) {
return false; // 默認(rèn)情況下不會(huì)阻止任何拖動(dòng)
},
direction: 'vertical', //元素的排放方向
copy: false, // 拖動(dòng)的元素是否為副本
copySortSource: false, // 復(fù)制的源容器重新排序
revertOnSpill: false, // 是否將拖到容器外的元素放回原處
removeOnSpill: false, // 是否將拖到容器外的元素刪除
mirrorContainer: document.body, // 設(shè)置獲取附加鏡像元素的元素
ignoreInputTextSelection: true //允許用戶選擇輸入文本
});
您可以省略container參數(shù)，稍后動(dòng)態(tài)添加容器肌访。
var drake = dragula({
copy: true
});
drake.containers.push(container);
還可以從options對(duì)象設(shè)置容器
var drake = dragula({ containers: containers });
你還可以設(shè)置一個(gè)沒有container和options的draglua
var drake = dragula();
options對(duì)象詳解：
containers:
和dragula(containers?, options?)的第一個(gè)參數(shù)效果是一樣的找默。
isContainer:
containers，您還可以使用此方法指定任何類型的邏輯吼驶，這些邏輯定義了這個(gè)特定drake實(shí)例的containers
下面的示例使用一個(gè)CSS類dragula-container動(dòng)態(tài)地處理所有DOM元素惩激，將它們作為這個(gè)drake的dragula容器店煞。var drake = dragula({ isContainer: function (el) { return el.classList.contains('dragula-container'); } });
moves:
您可以定義一個(gè)moves方法，當(dāng)單擊一個(gè)元素時(shí)咧欣，它將被調(diào)用(el浅缸、source、handle魄咕、sibling)衩椒。如果此方法返回false，則不會(huì)開始拖動(dòng)事件哮兰，也不會(huì)阻止該事件毛萌。handle元素將是原始的單擊目標(biāo)，這便于測(cè)試該元素是否是預(yù)期的“drag handle”喝滞。
accepts:
您可以將accept設(shè)置為具有以下簽名的方法:(el阁将、target、source右遭、sibling)做盅。它將被調(diào)用，以確保來自source的元素el可以在sibling元素之前被拖放到容器target上窘哈。sibling元素可以為null吹榴，這意味著元素將作為容器中的最后一個(gè)元素放置。注意如果options .copy被設(shè)置為true, el將被設(shè)置為copy滚婉，而不是原來拖動(dòng)的元素图筹。
還要注意，拖動(dòng)開始的位置始終是放置元素的有效位置让腹，即使在所有元素accepts都返回false远剩。
copy:
如果copy被設(shè)置為true(或返回true的方法)，那么項(xiàng)目將被復(fù)制骇窍，而不是移動(dòng)瓜晤。這意味著下列差別:
drag ---- move: 元素將從源中隱藏 / copy: 什么都不會(huì)發(fā)生
drop ---- move:元素將被移動(dòng)到目標(biāo)中 / copy: 元素將克隆到目標(biāo)
remove----move:元素將從DOM中刪除 / copy: 什么都不會(huì)發(fā)生
cancel----move:元素將保留在源代碼中/ copy: 什么都不會(huì)發(fā)生如果傳遞了一個(gè)方法，則無論何時(shí)開始拖拽一個(gè)元素腹纳，都會(huì)調(diào)用該方法活鹰，以決定它是否應(yīng)該遵循復(fù)制行為≈还溃考慮下面的例子。
copy: function (el, source) { return el.className === 'you-may-copy-us'; }
copySortSource:
如果copy被設(shè)置為true(或返回true的方法)着绷，copySortSource也為true蛔钙，那么用戶將能夠?qū)?fù)制源容器中的元素進(jìn)行排序。
revertOnSpill:
默認(rèn)情況下荠医，將元素溢出到任何容器外將會(huì)將元素移回反饋陰影預(yù)覽的放置位置吁脱。將revertOnSpill設(shè)置為true將確保將任何經(jīng)過批準(zhǔn)的容器外的元素移回拖放事件開始的源元素桑涎，而不是停留在反饋陰影預(yù)覽的拖放位置。
removeOnSpill:
默認(rèn)情況下兼贡，將元素溢出到任何容器外將會(huì)將元素移回反饋陰影預(yù)覽的放置位置攻冷。將removeOnSpill設(shè)置為true將確保從DOM中刪除任何經(jīng)過批準(zhǔn)的容器之外的元素。注意遍希，如果copy被設(shè)置為true等曼，那么remove事件不會(huì)觸發(fā)。
direction:
當(dāng)一個(gè)元素被放到容器中時(shí)凿蒜，它將被放置在鼠標(biāo)被釋放的位置附近禁谦。如果方向?yàn)椤皏ertical”(默認(rèn)值)，則將考慮Y軸废封。否則州泊，如果方向?yàn)椤癶orizontal”，則考慮X軸漂洋。
invalid:
您可以提供一個(gè)帶有(el, handle)簽名的無效方法遥皂。對(duì)于不應(yīng)該觸發(fā)拖動(dòng)的元素，此方法應(yīng)該返回true刽漂。handle參數(shù)是被單擊的元素演训，而el是要拖動(dòng)的項(xiàng)。這是默認(rèn)實(shí)現(xiàn)爽冕，它不阻止任何拖動(dòng)仇祭。
function invalidTarget (el, handle) { return false; }請(qǐng)注意，invalid將在被單擊的DOM元素和drake容器的每個(gè)父元素及其直接子元素上調(diào)用颈畸。
例如乌奇，當(dāng)單擊的元素(或其任何父元素)是錨標(biāo)記時(shí)，可以將invalid設(shè)置為return false眯娱。
invalid: function (el, handle) { return el.tagName === 'A'; }
mirrorContainer:
拖動(dòng)時(shí)顯示鏡像元素的DOM元素將被附加到其中礁苗。默認(rèn)為document.body
ignoreInputTextSelection:
當(dāng)啟用此選項(xiàng)時(shí)，如果用戶單擊輸入元素徙缴，則在鼠標(biāo)指針退出輸入之前不會(huì)開始拖動(dòng)试伙。這意味著用戶可以在包含在draggable元素中的輸入中選擇文本，并且仍然可以通過將鼠標(biāo)移到輸入之外來拖動(dòng)該元素——這樣您就可以同時(shí)使用這兩種方法于样。
默認(rèn)情況下啟用此選項(xiàng)疏叨。通過設(shè)置為false來關(guān)閉它。如果禁用了它穿剖，用戶將無法用鼠標(biāo)在dragula容器的輸入中選擇文本蚤蔓。
API：
dragula方法返回一個(gè)帶有簡(jiǎn)潔API的小對(duì)象。我們將把dragula返回的API稱為drake糊余。
drake.containers
此屬性包含構(gòu)建此drake實(shí)例時(shí)傳遞給dragula的容器集合秀又。您可以隨意push更多的容器和拼接舊容器单寂。
drake.dragging
每當(dāng)拖動(dòng)元素時(shí)，此屬性將為true吐辙。
drake.start(item)
進(jìn)入沒有陰影的拖動(dòng)模式宣决。當(dāng)為現(xiàn)有的拖放解決方案提供互補(bǔ)的鍵盤快捷方式時(shí)，此方法非常有用昏苏。雖然一開始不會(huì)創(chuàng)建陰影尊沸，但是用戶只要單擊項(xiàng)目并開始拖動(dòng)它，就會(huì)得到陰影捷雕。注意椒丧，如果他們單擊并拖動(dòng)其他內(nèi)容，.end將在獲取新項(xiàng)目之前被調(diào)用救巷。
drake.end()
優(yōu)雅地結(jié)束拖放事件壶熏，就像使用預(yù)覽陰影標(biāo)記的最后一個(gè)位置作為拖放目標(biāo)一樣。cancel或drop事件將被觸發(fā)浦译，這取決于該項(xiàng)目是否被拖回到最初被提取的地方(本質(zhì)上是一個(gè)被視為cancel事件的no-op)棒假。
drake.cancel(revert)
如果當(dāng)前正在拖拽drake管理的元素，此方法將優(yōu)雅地取消拖拽操作精盅。您還可以在方法調(diào)用時(shí)傳遞revert帽哑，有效地生成與revertOnSpill為true時(shí)相同的結(jié)果。
注意叹俏，“取消”只會(huì)在以下場(chǎng)景中導(dǎo)致取消事件妻枕。
1、revertOnSpill 為 true
2粘驰、Drop target(如反饋陰影預(yù)覽的那樣)是源容器屡谐，項(xiàng)目將被放置在最初拖動(dòng)它的位置
drake.remove()
如果當(dāng)前正在拖拽drake管理的元素，此方法將優(yōu)雅地將其從DOM中刪除蝌数。
drake.on (Events)
drake是一個(gè)事件發(fā)射器愕掏。drake.on(type, listener)可以使用drake跟蹤以下事件。
Events:
- drag,(el, source) —— el被從source 移除
- dragend,(el) —— el的拖動(dòng)事件以cancel顶伞、remove或drop結(jié)束
- drop,(el, target, source, sibling) ——el在sibling元素之前被放入target 中饵撑，最初來自 source
- cancel,(el, container, source) —— el被拖著走，但它什么也沒得到唆貌，又回到了它最后一個(gè)穩(wěn)定的container里;el最初來源于source
- remove,(el, container, source) —— el被拖著走了滑潘，被從DOM中移除。它最后一個(gè)穩(wěn)定的父類是container锨咙，最初來自source
- shadow,(el, container, source) —— el众羡，視覺輔助陰影，被移動(dòng)到container中蓖租。當(dāng)el位置發(fā)生變化時(shí)粱侣，即使在同一容器內(nèi)，也可能多次觸發(fā);el最初來源于source
- over,(el, container, source) —— el是over container蓖宦，最初來自source
- out,(el, container, source) —— el被拖出容器或被丟棄齐婴，最初來自source
- cloned,(clone, original, type) —— DOM元素original被克隆為clone，類型為('mirror'或'copy')稠茂。為鏡像和復(fù)制時(shí)觸發(fā):true
drake.canMove(item)
返回drake實(shí)例是否可以接受DOM元素項(xiàng)的拖動(dòng)柠偶。當(dāng)滿足下面列出的所有條件時(shí)，此方法返回true睬关，否則返回false诱担。
- item是drake指定容器之一的子容器
- item通過相關(guān)的無效檢查
- item通過移動(dòng)檢查
drake.destroy()
刪除dragula用于管理容器之間拖放的所有拖放事件。如果在拖動(dòng)元素時(shí)調(diào)用.destroy电爹，則該拖動(dòng)將被有效地取消蔫仙。
css：
Dragula只使用四個(gè)CSS類。下面將快速解釋它們的用途
- gu-unselectable ----- 在拖動(dòng)時(shí)添加到mirrorContainer元素丐箩。您可以在拖動(dòng)對(duì)象時(shí)使用它來設(shè)置mirrorContainer的樣式摇邦。
- gu-transit ----- 在拖動(dòng)源元素的鏡像時(shí)將其添加到源元素。它只是增加了不透明度屎勘。
- gu-mirror ----- 被添加到鏡像中施籍。它處理fixed 定位和z-index(并刪除元素上的任何先前的邊距)。注意概漱，鏡像被附加到mirrorContainer丑慎，而不是它的初始容器。當(dāng)使用嵌套規(guī)則對(duì)元素進(jìn)行樣式化時(shí)瓤摧，請(qǐng)記住這一點(diǎn)竿裂，比如.list .item {padding: 10px;}
- gu-hide ----- 是一個(gè)幫助類，用于對(duì)元素應(yīng)用display: none姻灶。
默認(rèn)：
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
