摘要:介紹是一款輕量級(jí)的拖放排序列表的插件雖然體積小,但是功能很強(qiáng)大下載地址官方特點(diǎn)支持觸屏設(shè)備和大部分瀏覽器以下的就不支持了,原因都懂得可以從一個(gè)列表容器中拖拽一個(gè)列表單元到其他容器或本列表容器中進(jìn)行排序移動(dòng)列表單元時(shí)有動(dòng)畫支持拖放操作和可選擇
介紹
Sortable.js是一款輕量級(jí)的拖放排序列表的js插件(雖然體積小,但是功能很強(qiáng)大)
下載地址:https://github.com/RubaXa/Sor...
官方DEMO:http://rubaxa.github.io/Sorta...
支持觸屏設(shè)備和大部分瀏覽器(IE9以下的就不支持了,原因都懂得)
可以從一個(gè)列表容器中拖拽一個(gè)列表單元到其他容器或本列表容器中進(jìn)行排序
移動(dòng)列表單元時(shí)有css動(dòng)畫
支持拖放操作和可選擇的文本(這句我也沒理解,大概意思就是對(duì)原生的拖放進(jìn)行拓展了)
非常友善的滾動(dòng)效果
基于原生HTML5中的拖放API
支持多種框架(angular、vue、react等)
支持所有的css框架,像Bootstrap
簡單的API,方便使用
CDN
不依賴jQuery
安裝npm安裝
$ npm install sortablejs --save
bower安裝
$ bower install --save sortablejs
當(dāng)然還有直接引入
使用可以通過Sorable對(duì)象中的create方法創(chuàng)建
var el = document.getElementById("items"); var sortable = Sortable.create(el,{});
也可以通過新建個(gè)Sortable對(duì)象來創(chuàng)建
var sortable = new Sortable(el, {})
實(shí)例中dom結(jié)構(gòu)中用到的是ul(無序列表),當(dāng)然也可以用其他的元素來構(gòu)造例如使用div等
配置項(xiàng)先把他的整體配置寫出來,在一個(gè)個(gè)介紹
var sortable = new Sortable(el, { group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } sort: true, // sorting inside list delay: 0, // time in milliseconds to define when the sorting should start disabled: false, // Disables the sortable if set to true. store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".my-handle", // Drag handle selector within list items filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function) draggable: ".item", // Specifies which items inside the element should be draggable ghostClass: "sortable-ghost", // Class name for the drop placeholder chosenClass: "sortable-chosen", // Class name for the chosen item dragClass: "sortable-drag", // Class name for the dragging item dataIdAttr: "data-id", forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback fallbackOnBody: false, // Appends the cloned DOM Element into the Document"s Body fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it"s considered as a drag. scroll: true, // or HTMLElement scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData("Text", dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is chosen onChoose: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging ended onEnd: function (/**Event*/evt) { evt.oldIndex; // element"s old index within parent evt.newIndex; // element"s new index within parent }, // Element is dropped into the list from another list onAdd: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement evt.from; // previous list // + indexes from onEnd }, // Changed sorting within list onUpdate: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement // + indexes from onEnd }, // Called by any change to the list (add / update / remove) onSort: function (/**Event*/evt) { // same properties as onUpdate }, // Element is removed from the list into another list onRemove: function (/**Event*/evt) { // same properties as onUpdate }, // Attempt to drag a filtered element onFilter: function (/**Event*/evt) { var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. }, // Event when you move an item in the list or between lists onMove: function (/**Event*/evt, /**Event*/originalEvent) { // Example: http://jsbin.com/tuyafe/1/edit?js,output evt.dragged; // dragged HTMLElement evt.draggedRect; // TextRectangle {left, top, right и bottom} evt.related; // HTMLElement on which have guided evt.relatedRect; // TextRectangle originalEvent.clientY; // mouse position // return false; — for cancel }, // Called when creating a clone of element onClone: function (/**Event*/evt) { var origEl = evt.item; var cloneEl = evt.clone; } });
屬性:
group:string or object
string:命名,個(gè)人建議用元素id就行,用處是為了設(shè)置可以拖放容器時(shí)使用,在array中的put的設(shè)置中再做介紹; object:{name,pull,put} name:同string的方法, pull:pull用來定義從這個(gè)列表容器移動(dòng)出去的設(shè)置,true/false/"clone"/function true:列表容器內(nèi)的列表單元可以被移出; false:列表容器內(nèi)的列表單元不可以被移出; "clone":列表單元移出,移動(dòng)的為該元素的副本; function:用來進(jìn)行pull的函數(shù)判斷,可以進(jìn)行復(fù)雜邏輯,在函數(shù)中return false/true來判斷是否移出; put:put用來定義往這個(gè)列表容器放置列表單元的的設(shè)置,true/false/["foo","bar"]/function true:列表容器可以從其他列表容器內(nèi)放入列表單元; false:與true相反; ["foo","bar"]:這個(gè)可以是一個(gè)字符串或者是字符串的數(shù)組,代表的是group配置項(xiàng)里定義的name值; function:用來進(jìn)行put的函數(shù)判斷,可以進(jìn)行復(fù)雜邏輯,在函數(shù)中return false/true來判斷是否放入;
sort:boolean 定義是否列表單元是否可以在列表容器內(nèi)進(jìn)行拖拽排序;
delay:number 定義鼠標(biāo)選中列表單元可以開始拖動(dòng)的延遲時(shí)間;
disabled:boolean 定義是否此sortable對(duì)象是否可用,為true時(shí)sortable對(duì)象不能拖放排序等功能,為false時(shí)為可以進(jìn)行排序,相當(dāng)于一個(gè)開關(guān);
animation:number 單位:ms,定義排序動(dòng)畫的時(shí)間;
handle:selector 格式為簡單css選擇器的字符串,使列表單元中符合選擇器的元素成為拖動(dòng)的手柄,只有按住拖動(dòng)手柄才能使列表單元進(jìn)行拖動(dòng);
filter:selector 格式為簡單css選擇器的字符串,定義哪些列表單元不能進(jìn)行拖放,可設(shè)置為多個(gè)選擇器,中間用“,”分隔;
draggable:selector 格式為簡單css選擇器的字符串,定義哪些列表單元可以進(jìn)行拖放
ghostClass:selector 格式為簡單css選擇器的字符串,當(dāng)拖動(dòng)列表單元時(shí)會(huì)生成一個(gè)副本作為影子單元來模擬被拖動(dòng)單元排序的情況,此配置項(xiàng)就是來給這個(gè)影子單元添加一個(gè)class,我們可以通過這種方式來給影子元素進(jìn)行編輯樣式;
chosenClass:selector 格式為簡單css選擇器的字符串,當(dāng)選中列表單元時(shí)會(huì)給該單元增加一個(gè)class;
forceFallback:boolean 如果設(shè)置為true時(shí),將不使用原生的html5的拖放,可以修改一些拖放中元素的樣式等;
fallbackClass:string 當(dāng)forceFallback設(shè)置為true時(shí),拖放過程中鼠標(biāo)附著單元的樣式;
scroll:boolean 默認(rèn)為true,當(dāng)排序的容器是個(gè)可滾動(dòng)的區(qū)域,拖放可以引起區(qū)域滾動(dòng)
事件:
onChoose:function 列表單元被選中的回調(diào)函數(shù)
onStart:function 列表單元拖動(dòng)開始的回調(diào)函數(shù)
onEnd:function 列表單元拖放結(jié)束后的回調(diào)函數(shù)
onAdd:function 列表單元添加到本列表容器的回調(diào)函數(shù)
onUpdate:function 列表單元在列表容器中的排序發(fā)生變化后的回調(diào)函數(shù)
onRemove:function 列表元素移到另一個(gè)列表容器的回調(diào)函數(shù)
onFilter:function 試圖選中一個(gè)被filter過濾的列表單元的回調(diào)函數(shù)
onMove:function 當(dāng)移動(dòng)列表單元在一個(gè)列表容器中或者多個(gè)列表容器中的回調(diào)函數(shù)
onClone:function 當(dāng)創(chuàng)建一個(gè)列表單元副本的時(shí)候的回調(diào)函數(shù)
事件對(duì)象:
事件對(duì)象在各個(gè)函數(shù)中略有不同,可通過輸出對(duì)象查看對(duì)象的屬性,下面簡單列舉幾個(gè):
to:HTMLElement--移動(dòng)到列表容器
from:HTMLElement--來源的列表容器
item:HTMLElement--被移動(dòng)的列表單元
clone:HTMLElement--副本的列表單元
oldIndex:number/undefined--在列表容器中的原序號(hào)
newIndex:number/undefined--在列表容器中的新序號(hào)
方法
option(name[,value])
獲得或者設(shè)置項(xiàng)參數(shù),使用方法類似于jQuery用法,沒有第二個(gè)參數(shù)為獲得option中第一個(gè)參數(shù)所對(duì)應(yīng)的值,有第二個(gè)參數(shù)時(shí),將重新賦給第一個(gè)參數(shù)所對(duì)應(yīng)的值;
closest
沒理解
toArray()
序列化可排序的列表單元的data-id(可通過配置項(xiàng)中dataIdAttr修改)放入一個(gè)數(shù)組,并返回這個(gè)數(shù)組中
sort()
通過自定義列表單元的data-id的數(shù)組對(duì)列表單元進(jìn)行排序
save()
destroy()
有問題加我qq吧,這個(gè)評(píng)論翻著不是很好找,635905156
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/81353.html
摘要:注意點(diǎn)在鼠標(biāo)操作拖放期間,有一些事件可能觸發(fā)多次,比如和。可拖拽元素,建議使用,設(shè)定可拖拽元素的鼠標(biāo)游標(biāo),提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop (拖放)? 簡單來說,HTML5 提供了 Drag and Drop API,允許用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)元素,移動(dòng)鼠標(biāo)拖放到一個(gè)可放置到元素的過程。 我相信每個(gè)人都或多或少接觸過拖放,比如瀏覽...
摘要:拖放事件拖放事件由不同的元素產(chǎn)生。源對(duì)象拖放結(jié)束。目標(biāo)對(duì)象源對(duì)象被拖放到目標(biāo)對(duì)象內(nèi)。實(shí)現(xiàn)拖放排序上面已經(jīng)熟悉了拖放的使用,我們來實(shí)現(xiàn)個(gè)簡單的拖放排序,這也是在項(xiàng)目中比較常見的。 前言 HTML5 中提供了直接拖放的 API,極大的方便我們實(shí)現(xiàn)拖放效果,不需要去寫一大堆的 js,只需要通過監(jiān)聽元素的拖放事件就能實(shí)現(xiàn)各種拖放功能。 想要拖放某個(gè)元素,必須設(shè)置該元素的 draggable 屬...
摘要:無論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手,我們都喜歡開源軟件包。所幸的是,隨著社區(qū)的不斷壯大,每天都會(huì)出現(xiàn)一些很好的軟件包。在下文中,我們將推薦一些非常好用的開源庫是一個(gè)非常易用的漸進(jìn)式框架,用于構(gòu)建用戶界面。的一個(gè)極簡主義的深色設(shè)計(jì)系統(tǒng)。 無論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手,我們都喜歡開源軟件包。對(duì)于開發(fā)者來說,如果沒有這些開源軟件包,很難想象我們的生活會(huì)變得多么疲憊不堪,而且靠咖啡度日也會(huì)成...
閱讀 1402·2021-11-22 09:34
閱讀 1378·2021-09-22 14:57
閱讀 3400·2021-09-10 10:50
閱讀 1372·2019-08-30 15:54
閱讀 3690·2019-08-29 17:02
閱讀 3472·2019-08-29 12:54
閱讀 2611·2019-08-27 10:57
閱讀 3316·2019-08-26 12:24