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

參考?

Swapy 主頁

Swapy Vue Demo

簡介?

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

安裝

最簡使用?

先熟悉兩個基本概念：

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

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

拖動把手?

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

可為元素添加 data-swapy-handle 屬性，其他的區(qū)域?qū)⒉荒芡蟿印?/p>

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

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

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

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

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

此時就可以將位置信息持久化到存儲中：

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