国內一级黄色视频|少妇91导航日韩第一页久久|黄色三A视频色爽网站|亚洲精品 无码一区二区在直播间|成人高清国产无码|aaa成人免费视频|国产一级一片免费播放放a|我要看免费的毛片|动漫a片免费观看|日韩欧美国产视频

參考?

Swapy 主頁

Swapy Vue Demo

簡(jiǎn)介?

一個(gè)相當(dāng)簡(jiǎn)潔的拖動(dòng)庫，簡(jiǎn)潔到?jīng)]有任何多余的功能。官方文檔甚至只有一頁。

安裝

最簡(jiǎn)使用?

先熟悉兩個(gè)基本概念：

• 插槽 slots：可以放置拖動(dòng)元素的區(qū)域，使用 data-swapy-slot="xxx" 標(biāo)識(shí)。
• 拖動(dòng)項(xiàng) items：可以拖動(dòng)的元素，使用 data-swopy-item="xxx" 標(biāo)識(shí)。

拖動(dòng)項(xiàng)可在插槽中自由拖動(dòng)，交換位置。

拖動(dòng)把手?

有時(shí)需要限制，讓拖動(dòng)項(xiàng)中只有某個(gè)元素可拖動(dòng)。

可為元素添加 data-swapy-handle 屬性，其他的區(qū)域?qū)⒉荒芡蟿?dòng)。

當(dāng)前插槽高亮?

swapy 會(huì)為當(dāng)前即將被放置的 channel 添加 data-swapy-highlighted 屬性?？梢允褂?CSS 為其添加屬性：

事件監(jiān)聽與位置持久化?

使用 onSwap 監(jiān)聽拖動(dòng)事件，函數(shù)返回一個(gè)只包含 data 屬性的對(duì)象。

它會(huì)以 map、array、object 三種形式來返回插槽與拖動(dòng)項(xiàng)之間的對(duì)應(yīng)關(guān)系。

此時(shí)就可以將位置信息持久化到存儲(chǔ)中：

此后對(duì)應(yīng)地需要寫活最初的 html 代碼，讓它根據(jù)存儲(chǔ)順序渲染拖動(dòng)項(xiàng)，此處便不贅述了。