紹

演示地址： https://sortablejs.github.io/Sortable/

Github：https://github.com/SortableJS/Sortable

SortableJS是一款用于在現代瀏覽器和觸摸設備上的拖拽插件，不需要jQuery，但支持jQuery,支持Meteor，AngularJS，React，Polymer，Vue，Knockout和任何CSS庫，例如Bootstrap。

特性

• 支持觸屏設備和大部分瀏覽器，不支持IE9以下
• 可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序
• 拖拽列表有動畫效果
• 支持拖動手柄（小手）和可選文本
• 智能自動滾動
• 高級交換檢測
• 使用原生HTML5拖放API構建
• 支持Meter、Angular、React、Knockout、Polymer、Vue
• 支持任意CSS庫，如BootStrap
• 簡單的API
• CDN服務
• 不依賴jQuery(但支持jQuery)

安裝

通過npm

npm install sortablejs --save

通過bower

 bower install --save sortablejs

用法

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
var el=document.getElementById('items');
var sortable=Sortable.create(el);

備注：不僅僅是可以使用ul/li，比如div等

官方配置

根據官網文檔簡單介紹下：

• group：字符串或對象

string：命名，個人建議用元素id就行,用處是為了設置可以拖放容器時使用
 array：[name,pull,put]
 name：同string的方法，
 pull：pull用來定義從這個列表容器移動出去的設置，true/false/'clone'/function
 true:列表容器內的列表單元可以被移出；
 false：列表容器內的列表單元不可以被移出；
 'clone'：列表單元移出，移動的為該元素的副本；
 function：用來進行pull的函數判斷，可以進行復雜邏輯，在函數中return false/true來判斷是否移出；
 put：put用來定義往這個列表容器放置列表單元的的設置，true/false/['foo','bar']/function
 true:列表容器可以從其他列表容器內放入列表單元；
 false：與true相反；
 ['foo','bar']：這個可以是一個字符串或者是字符串的數組，代表的是group配置項里定義的name值；
 function：用來進行put的函數判斷，可以進行復雜邏輯，在函數中return false/true來判斷是否放入；

• sort：boolean 定義是否列表單元是否可以在列表容器內進行拖拽排序
• delay：number 定義鼠標選中列表單元可以開始拖動的延遲時間；
• disabled：boolean 定義是否此sortable對象是否可用，為true時sortable對象不能拖放排序等功能，為false時為可以進行排序，相當于一個開關；
• animation：number 單位：ms，定義排序動畫的時間；
• handle：selector 格式為簡單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動；
• filter：selector 格式為簡單css選擇器的字符串，定義哪些列表單元不能進行拖放，可設置為多個選擇器，中間用“，”分隔；
• draggable：selector 格式為簡單css選擇器的字符串，定義哪些列表單元可以進行拖放
• ghostClass：selector 格式為簡單css選擇器的字符串，當拖動列表單元時會生成一個副本作為影子單元來模擬被拖動單元排序的情況，此配置項就是來給這個影子單元添加一個class，我們可以通過這種方式來給影子元素進行編輯樣式；
• chosenClass：selector 格式為簡單css選擇器的字符串，當選中列表單元時會給該單元增加一個class；
• forceFallback：boolean 如果設置為true時，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等；
• fallbackClass：string 當forceFallback設置為true時，拖放過程中鼠標附著單元的樣式；
• scroll：boolean 默認為true，當排序的容器是個可滾動的區域，拖放可以引起區域滾動
• 事件：
• onChoose：function 列表單元被選中的回調函數
• onStart：function 列表單元拖動開始的回調函數
• onEnd：function 列表單元拖放結束后的回調函數
• onAdd：function 列表單元添加到本列表容器的回調函數
• onUpdate：function 列表單元在列表容器中的排序發生變化后的回調函數
• onRemove：function 列表元素移到另一個列表容器的回調函數
• onFilter：function 試圖選中一個被filter過濾的列表單元的回調函數
• onMove：function 當移動列表單元在一個列表容器中或者多個列表容器中的回調函數
• onClone：function 當創建一個列表單元副本的時候的回調函數

事件對象

• to：HTMLElement–移動到列表容器
• from：HTMLElement–來源的列表容器
• item：HTMLElement–被移動的列表單元
• clone：HTMLElement–副本的列表單元
• oldIndex：number/undefined–在列表容器中的原序號
• newIndex：number/undefined–在列表容器中的新序號

move 事件對象：

• to:HTMLElement
• from:HTMLElement
• dragged:HTMLElement
• draggedRect:DOMRect
• related:HTMLElement — element on which have guided
• relatedRect:DOMRect
• willInsertAfter:Boolean — true if will element be inserted after target (or false if before)

方法

• option(name[,value])

獲取或設置選項

• closest

對于集合中的每個元素，通過測試元素本身并遍歷DOM樹中的祖先來獲取與選擇器匹配的第一個元素

• toArray()

序列化可排序的列表單元的data-id（可通過配置項中dataIdAttr修改）放入一個數組，并返回這個數組中

• sort()

通過自定義列表單元的data-id的數組對列表單元進行排序

• save()

保存當前排序

• destroy()

完全銷毀可拖拽功能

總結以下

SortableJS在某些場景下非常有用，它是一個很好用的前端拖拽解決方案，合理的使用將會帶來某些意想不到的驚喜，比如讓某些不可拖拽模態框，變成可拖拽模態（沒有實踐過），喜歡折騰的小伙伴可以收藏學習了，本人翻譯功底實在有限，如果對你有幫助，請點個關注吧！謝謝！

css鏈接

鏈接可以使用任何css屬性(例如,color,font-family,background等)來設置樣式.

另外,鏈接的樣式可以不同,具體取決于所處的狀態.以下偽選擇器可用:

a:link 定義正常的為訪問鏈接的樣式

a:visited 定義訪問鏈接的樣式

a:active 一旦點擊鏈接,鏈接就會激活

a:hover 當鼠標懸停時,鏈接的樣式

下面的例子,創建一個鏈接,當鼠標移動到它上面的時候會改變樣式

html代碼:

<p><a target="_blank">搜狗</a></p>

css代碼:

a:hover{ color:red; }

執行結果如下:

這是鼠標移動到鏈接上時,顯示的樣式

當為鏈接設置樣式時,必須遵守以下規則:

a:hover 必須在a:link和a:visited之后

a:active 必須在a:hover之后

默認情況下,文本鏈接由瀏覽器加下劃線.

處理帶鏈接的文本,css最常見的用法之一是刪除下劃線.在下面的示例中,text-decoration屬性用于刪除下劃線.

html代碼:

<p><a class="text-decoration" href="https:www.sougou.com">我的下劃線已經被刪除了!</a></p>

css代碼:

a.text-decoration:link{text-decoration:none;}

效果如下:

以下屬性用于控制鏈接的樣式:

border:none 從包含鏈接的圖像中刪除邊框

outline:none 刪除IE中點擊鏈接行上的虛線邊框

二 css自定義鼠標光標樣式

css允許你將鼠標懸停在元素上時,設置所需的光標樣式.例如,你可以將光標更改為手形圖標,幫助圖標等.而不是默認的指針.

在下面的例子中,當我們將鼠標移動到span元素上時,鼠標指針被設置為一個幫助圖標.(cursor就是光標的意思)

<span style="cursor:help;">需要幫忙么?</span>

效果如下:

cursor屬性還有許多其他的值.例如:

default:默認光標

crosshair:光標顯示為十字準線

pointer:光標顯示為手形圖標

cursor的值比較多,用圖片顯示給大家:

通常改變鼠標光標的外觀,是為了提高網站訪問者的體驗.但是,選擇錯誤的光標風格也可能會引起誤解.