成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實(shí)現(xiàn)平滑過(guò)渡的拖拽排序

Lowky / 1888人閱讀

摘要：將元素由拖拽開(kāi)始的地方移到拖拽結(jié)束地方，這期間，目標(biāo)元素和目標(biāo)元素周圍的元素要怎么平滑過(guò)渡到新的位置。

最近重讀Vue官方文檔，在列表的排序過(guò)渡這一小節(jié)，文檔提到， 組件有一個(gè)特殊的地方，不僅可以實(shí)現(xiàn)進(jìn)入和離開(kāi)動(dòng)畫，還可以改變定位，官網(wǎng)示例如下：

例子中實(shí)現(xiàn)的效果看起來(lái)還是非常不錯(cuò)的，這個(gè)效果使我想起來(lái)另外一個(gè)使用場(chǎng)景，之前我在實(shí)現(xiàn)一個(gè)列表展示需求的時(shí)候，PM想讓這個(gè)列表具有拖動(dòng)排序的功能，方便他操作（事實(shí)上我最后并沒(méi)有給他做哈哈），拖動(dòng)的動(dòng)畫跟這個(gè)很像，網(wǎng)上搜索一下，類似插件應(yīng)該很多，那如果我們自己來(lái)實(shí)現(xiàn)一個(gè)，問(wèn)題在哪里呢？

首先要拖拽元素，記錄元素拖拽開(kāi)始和結(jié)束的信息。

將元素由拖拽開(kāi)始的地方移到拖拽結(jié)束地方，這期間，目標(biāo)元素和目標(biāo)元素周圍的元素要怎么平滑過(guò)渡到新的位置。

問(wèn)題1很好解決，翻一下api，HTML5提供了性能很棒的拖放API，PC端兼容性良好，可直接使用
問(wèn)題2剛好可以使用上面學(xué)到的組件去實(shí)現(xiàn)。

拖放API中提到，一個(gè)可拖拽的元素，在用戶拖拽這一整個(gè)流程中，可以通過(guò)這個(gè)事件去獲取你想要的信息：

這里的話，我們選取dragstart去記錄下拖拽元素的信息，dragenter去記錄此元素拖拽時(shí)經(jīng)過(guò)了哪些元素，dragend事件中去做拖拽結(jié)束的操作，動(dòng)畫的事情就交給transition-group去做了。

最終實(shí)現(xiàn)的效果如下：

demo代碼如下：





    
    
    test
    



    

      
          
{{item}}

注：你也可以一遍拖拽一遍更改順序，不用等dragend再做動(dòng)畫，但是一邊拖拽一邊做動(dòng)畫的時(shí)候看起來(lái)眼花繚亂的（僅以這個(gè)demo來(lái)看是這樣的，其他插件可以提供別的解決方法，暫且按下不表）所以我選擇用戶拖拽停止之后再做動(dòng)畫。
在這一節(jié)中，vue官方還介紹了一個(gè)叫FLIP的簡(jiǎn)單的動(dòng)畫隊(duì)列，有興趣可以研究一下，F(xiàn)LIP介紹，打開(kāi)這個(gè)FLIP你會(huì)發(fā)現(xiàn)它的示例中有介紹另外一個(gè)動(dòng)畫庫(kù)GASP，可以實(shí)現(xiàn)很酷炫的動(dòng)畫效果，跟FLIP結(jié)合使用效果更佳。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104628.html

相關(guān)文章

  • 實(shí)現(xiàn)平滑過(guò)渡的拖拽排序

    摘要：將元素由拖拽開(kāi)始的地方移到拖拽結(jié)束地方，這期間，目標(biāo)元素和目標(biāo)元素周圍的元素要怎么平滑過(guò)渡到新的位置。 最近重讀Vue官方文檔，在列表的排序過(guò)渡這一小節(jié)，文檔提到， 組件有一個(gè)特殊的地方，不僅可以實(shí)現(xiàn)進(jìn)入和離開(kāi)動(dòng)畫，還可以改變定位，官網(wǎng)示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實(shí)現(xiàn)的效果看起來(lái)還...

    chengjianhua 評(píng)論0 收藏0

  • 基于H5實(shí)現(xiàn)的react拖拽排序組件

    摘要：拖拽排序組件地址因?yàn)槭褂昧思夹g(shù)棧，所以封裝優(yōu)先考慮輸入和輸出?；跀?shù)據(jù)驅(qū)動(dòng)去渲染頁(yè)面控制拖拽元素的順序。例如原生的事件，在里應(yīng)使用事件。 拖拽排序組件Github地址：https://github.com/VicEcho/VD... 因?yàn)槭褂昧藃eact.js技術(shù)棧，所以封裝優(yōu)先考慮輸入和輸出?；跀?shù)據(jù)驅(qū)動(dòng)去渲染頁(yè)面、控制拖拽元素的順序。 由于我不考慮兼容IE8等舊版本瀏覽器，拖拽的效...

    sevi_stuo 評(píng)論0 收藏0

  • 頁(yè)面搭建工具總結(jié)及架構(gòu)思考

    摘要：在初步完成了在線流程圖編輯工具之后又接到了在線搭建頁(yè)面工具的需求剛開(kāi)始其實(shí)并不想接項(xiàng)目因?yàn)閺臍v史以及現(xiàn)實(shí)原因來(lái)看個(gè)性化及動(dòng)態(tài)渲染都是很難解決的痛點(diǎn)各種頁(yè)面搭建工具的不溫不火早已說(shuō)明了這條路并沒(méi)有這么好走但從另一個(gè)方面來(lái)說(shuō)既然有了這樣的需求那 在初步完成了在線流程圖編輯工具之后,又接到了在線搭建頁(yè)面工具的需求,剛開(kāi)始其實(shí)并不想接項(xiàng)目,因?yàn)閺臍v史以及現(xiàn)實(shí)原因來(lái)看,個(gè)性化及動(dòng)態(tài)渲染都是很難解決的痛...

    William_Sang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<