97精品手机网,青青草国产福利,久久色亚洲

聲明

本人也在不斷的學習和積累中，文章中有不足和誤導的地方還請見諒，可以給我留言指正。希望和大家共同進步，共建和諧學習環(huá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中間互相拖動，如果拖動到containers之外的元素時，會根據(jù) revertOnSpill 和removeOnSpill 的配置終止操作。
請注意，拖動僅在左鍵單擊時觸發(fā)

下面的示例允許用戶將元素從中l(wèi)eft拖入right和從中right拖入left

dragula([document.querySelector('#left'), document.querySelector('#right')]);

您還可以提供一個options對象。以下是默認值的介紹

dragula(containers, {
  isContainer: function (el) {
    return false; // 點擊和拖動都會觸發(fā)，drake.containers元素將被考慮
  },
  moves: function (el, source, handle, sibling) {
    return true; // 一直能拖動，拖動時觸發(fā)
  },
  accepts: function (el, target, source, sibling) {
    return true; // 元素可以放在任何`container`中
  },
  invalid: function (el, handle) {
    return false; // 默認情況下不會阻止任何拖動
  },
  direction: 'vertical',             //元素的排放方向
  copy: false,                       // 拖動的元素是否為副本
  copySortSource: false,             // 復制的源容器重新排序
  revertOnSpill: false,              // 是否將拖到容器外的元素放回原處
  removeOnSpill: false,              // 是否將拖到容器外的元素刪除
  mirrorContainer: document.body,    // 設置獲取附加鏡像元素的元素
  ignoreInputTextSelection: true     //允許用戶選擇輸入文本
});

您可以省略container參數(shù)，稍后動態(tài)添加容器。

var drake = dragula({
  copy: true
});
drake.containers.push(container);

還可以從options對象設置容器

var drake = dragula({ containers: containers });

你還可以設置一個沒有container和options的draglua

var drake = dragula();

options對象詳解：

containers:

和dragula(containers?, options?)的第一個參數(shù)效果是一樣的。

isContainer:

containers，您還可以使用此方法指定任何類型的邏輯，這些邏輯定義了這個特定drake實例的containers
下面的示例使用一個CSS類dragula-container動態(tài)地處理所有DOM元素，將它們作為這個drake的dragula容器。
var drake = dragula({
isContainer: function (el) {
   return el.classList.contains('dragula-container');
 }
});

moves:

您可以定義一個moves方法，當單擊一個元素時，它將被調用(el、source、handle、sibling)。如果此方法返回false，則不會開始拖動事件，也不會阻止該事件。handle元素將是原始的單擊目標，這便于測試該元素是否是預期的“drag handle”。

accepts:

您可以將accept設置為具有以下簽名的方法:(el、target、source、sibling)。它將被調用，以確保來自source的元素el可以在sibling元素之前被拖放到容器target上。sibling元素可以為null，這意味著元素將作為容器中的最后一個元素放置。注意如果options .copy被設置為true, el將被設置為copy，而不是原來拖動的元素。

還要注意，拖動開始的位置始終是放置元素的有效位置，即使在所有元素accepts都返回false。

copy:

如果copy被設置為true(或返回true的方法)，那么項目將被復制，而不是移動。這意味著下列差別:
drag ---- move: 元素將從源中隱藏 / copy: 什么都不會發(fā)生
drop ---- move:元素將被移動到目標中 / copy: 元素將克隆到目標
remove----move:元素將從DOM中刪除 / copy: 什么都不會發(fā)生
cancel----move:元素將保留在源代碼中/ copy: 什么都不會發(fā)生

如果傳遞了一個方法，則無論何時開始拖拽一個元素，都會調用該方法，以決定它是否應該遵循復制行為。考慮下面的例子。
copy: function (el, source) {
 return el.className === 'you-may-copy-us';
}

copySortSource:

如果copy被設置為true(或返回true的方法)，copySortSource也為true，那么用戶將能夠對復制源容器中的元素進行排序。

revertOnSpill:

默認情況下，將元素溢出到任何容器外將會將元素移回反饋陰影預覽的放置位置。將revertOnSpill設置為true將確保將任何經(jīng)過批準的容器外的元素移回拖放事件開始的源元素，而不是停留在反饋陰影預覽的拖放位置。

removeOnSpill:

默認情況下，將元素溢出到任何容器外將會將元素移回反饋陰影預覽的放置位置。將removeOnSpill設置為true將確保從DOM中刪除任何經(jīng)過批準的容器之外的元素。注意，如果copy被設置為true，那么remove事件不會觸發(fā)。

direction:

當一個元素被放到容器中時，它將被放置在鼠標被釋放的位置附近。如果方向為“vertical”(默認值)，則將考慮Y軸。否則，如果方向為“horizontal”，則考慮X軸。

invalid:

您可以提供一個帶有(el, handle)簽名的無效方法。對于不應該觸發(fā)拖動的元素，此方法應該返回true。handle參數(shù)是被單擊的元素，而el是要拖動的項。這是默認實現(xiàn)，它不阻止任何拖動。
function invalidTarget (el, handle) {
 return false;
}
請注意，invalid將在被單擊的DOM元素和drake容器的每個父元素及其直接子元素上調用。

例如，當單擊的元素(或其任何父元素)是錨標記時，可以將invalid設置為return false。
invalid: function (el, handle) {
 return el.tagName === 'A';
}

mirrorContainer:

拖動時顯示鏡像元素的DOM元素將被附加到其中。默認為document.body

ignoreInputTextSelection:

當啟用此選項時，如果用戶單擊輸入元素，則在鼠標指針退出輸入之前不會開始拖動。這意味著用戶可以在包含在draggable元素中的輸入中選擇文本，并且仍然可以通過將鼠標移到輸入之外來拖動該元素——這樣您就可以同時使用這兩種方法。

默認情況下啟用此選項。通過設置為false來關閉它。如果禁用了它，用戶將無法用鼠標在dragula容器的輸入中選擇文本。

API：

dragula方法返回一個帶有簡潔API的小對象。我們將把dragula返回的API稱為drake。

drake.containers

此屬性包含構建此drake實例時傳遞給dragula的容器集合。您可以隨意push更多的容器和拼接舊容器。

drake.dragging

每當拖動元素時，此屬性將為true。

drake.start(item)

進入沒有陰影的拖動模式。當為現(xiàn)有的拖放解決方案提供互補的鍵盤快捷方式時，此方法非常有用。雖然一開始不會創(chuàng)建陰影，但是用戶只要單擊項目并開始拖動它，就會得到陰影。注意，如果他們單擊并拖動其他內容，.end將在獲取新項目之前被調用。

drake.end()

優(yōu)雅地結束拖放事件，就像使用預覽陰影標記的最后一個位置作為拖放目標一樣。cancel或drop事件將被觸發(fā)，這取決于該項目是否被拖回到最初被提取的地方(本質上是一個被視為cancel事件的no-op)。

drake.cancel(revert)

如果當前正在拖拽drake管理的元素，此方法將優(yōu)雅地取消拖拽操作。您還可以在方法調用時傳遞revert，有效地生成與revertOnSpill為true時相同的結果。

注意，“取消”只會在以下場景中導致取消事件。
1、revertOnSpill 為 true
2、Drop target(如反饋陰影預覽的那樣)是源容器，項目將被放置在最初拖動它的位置

drake.remove()

如果當前正在拖拽drake管理的元素，此方法將優(yōu)雅地將其從DOM中刪除。

drake.on (Events)

drake是一個事件發(fā)射器。drake.on(type, listener)可以使用drake跟蹤以下事件。

Events:

drag,(el, source) —— el被從source 移除

dragend,(el) —— el的拖動事件以cancel、remove或drop結束

drop,(el, target, source, sibling) ——el在sibling元素之前被放入target 中，最初來自 source

cancel,(el, container, source) —— el被拖著走，但它什么也沒得到，又回到了它最后一個穩(wěn)定的container里;el最初來源于source

remove,(el, container, source) —— el被拖著走了，被從DOM中移除。它最后一個穩(wěn)定的父類是container，最初來自source

shadow,(el, container, source) —— el，視覺輔助陰影，被移動到container中。當el位置發(fā)生變化時，即使在同一容器內，也可能多次觸發(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ā):true

drake.canMove(item)

返回drake實例是否可以接受DOM元素項的拖動。當滿足下面列出的所有條件時，此方法返回true，否則返回false。

item是drake指定容器之一的子容器

item通過相關的無效檢查

item通過移動檢查

drake.destroy()

刪除dragula用于管理容器之間拖放的所有拖放事件。如果在拖動元素時調用.destroy，則該拖動將被有效地取消。

css：

Dragula只使用四個CSS類。下面將快速解釋它們的用途

gu-unselectable ----- 在拖動時添加到mirrorContainer元素。您可以在拖動對象時使用它來設置mirrorContainer的樣式。
gu-transit ----- 在拖動源元素的鏡像時將其添加到源元素。它只是增加了不透明度。
gu-mirror ----- 被添加到鏡像中。它處理fixed 定位和z-index(并刪除元素上的任何先前的邊距)。注意，鏡像被附加到mirrorContainer，而不是它的初始容器。當使用嵌套規(guī)則對元素進行樣式化時，請記住這一點，比如.list .item {padding: 10px;}
gu-hide ----- 是一個幫助類，用于對元素應用display: none。

默認：

.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);
}

參考

Github/dragula

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue拖拽插件——Draglua 中文使用教程

Vue拖拽插件——Draglua 中文使用教程

聲明

特征

安裝

css

方法

dragula(containers?, options?)

options對象詳解：

containers:

isContainer:

moves:

accepts:

copy:

copySortSource:

revertOnSpill:

removeOnSpill:

direction:

invalid:

mirrorContainer:

ignoreInputTextSelection:

API：

drake.containers

drake.dragging

drake.start(item)

drake.end()

drake.cancel(revert)

drake.remove()

drake.on (Events)

drake.canMove(item)

drake.destroy()

css：

參考

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue拖拽插件——Draglua 中文使用教程

聲明

特征

安裝

css

方法

dragula(containers?, options?)

options對象詳解：

containers:

isContainer:

moves:

accepts:

copy:

copySortSource:

revertOnSpill:

removeOnSpill:

direction:

invalid:

mirrorContainer:

ignoreInputTextSelection:

API：

drake.containers

drake.dragging

drake.start(item)

drake.end()

drake.cancel(revert)

drake.remove()

drake.on (Events)

drake.canMove(item)

drake.destroy()

css：

參考

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av