{{item}}
資訊專欄INFORMATION COLUMN
摘要：將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。
最近重讀Vue官方文檔，在列表的排序過渡這一小節(jié)，文檔提到，
例子中實現(xiàn)的效果看起來還是非常不錯的，這個效果使我想起來另外一個使用場景，之前我在實現(xiàn)一個列表展示需求的時候，PM想讓這個列表具有拖動排序的功能，方便他操作（事實上我最后并沒有給他做哈哈），拖動的動畫跟這個很像，網(wǎng)上搜索一下，類似插件應該很多，那如果我們自己來實現(xiàn)一個，問題在哪里呢？
首先要拖拽元素，記錄元素拖拽開始和結(jié)束的信息。
將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。
問題1很好解決，翻一下api，HTML5提供了性能很棒的拖放API，PC端兼容性良好，可直接使用
問題2剛好可以使用上面學到的
拖放API中提到，一個可拖拽的元素，在用戶拖拽這一整個流程中，可以通過這個事件去獲取你想要的信息：
這里的話，我們選取dragstart去記錄下拖拽元素的信息，dragenter去記錄此元素拖拽時經(jīng)過了哪些元素，dragend事件中去做拖拽結(jié)束的操作，動畫的事情就交給transition-group去做了。
最終實現(xiàn)的效果如下：
demo代碼如下：
test
{{item}}
注：你也可以一遍拖拽一遍更改順序，不用等dragend再做動畫，但是一邊拖拽一邊做動畫的時候看起來眼花繚亂的（僅以這個demo來看是這樣的，其他插件可以提供別的解決方法，暫且按下不表）所以我選擇用戶拖拽停止之后再做動畫。
在這一節(jié)中，vue官方還介紹了一個叫FLIP的簡單的動畫隊列，有興趣可以研究一下，F(xiàn)LIP介紹，打開這個FLIP你會發(fā)現(xiàn)它的示例中有介紹另外一個動畫庫GASP，可以實現(xiàn)很酷炫的動畫效果，跟FLIP結(jié)合使用效果更佳。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104628.html
摘要：將元素由拖拽開始的地方移到拖拽結(jié)束地方，這期間，目標元素和目標元素周圍的元素要怎么平滑過渡到新的位置。 最近重讀Vue官方文檔，在列表的排序過渡這一小節(jié)，文檔提到， 組件有一個特殊的地方，不僅可以實現(xiàn)進入和離開動畫，還可以改變定位，官網(wǎng)示例如下：showImg(https://segmentfault.com/img/bVbtMTM?w=634&h=424); 例子中實現(xiàn)的效果看起來還...
摘要：拖拽排序組件地址因為使用了技術棧，所以封裝優(yōu)先考慮輸入和輸出。基于數(shù)據(jù)驅(qū)動去渲染頁面控制拖拽元素的順序。例如原生的事件，在里應使用事件。 拖拽排序組件Github地址：https://github.com/VicEcho/VD... 因為使用了react.js技術棧，所以封裝優(yōu)先考慮輸入和輸出。基于數(shù)據(jù)驅(qū)動去渲染頁面、控制拖拽元素的順序。 由于我不考慮兼容IE8等舊版本瀏覽器，拖拽的效...
摘要：在初步完成了在線流程圖編輯工具之后又接到了在線搭建頁面工具的需求剛開始其實并不想接項目因為從歷史以及現(xiàn)實原因來看個性化及動態(tài)渲染都是很難解決的痛點各種頁面搭建工具的不溫不火早已說明了這條路并沒有這么好走但從另一個方面來說既然有了這樣的需求那 在初步完成了在線流程圖編輯工具之后,又接到了在線搭建頁面工具的需求,剛開始其實并不想接項目,因為從歷史以及現(xiàn)實原因來看,個性化及動態(tài)渲染都是很難解決的痛...
閱讀 3149·2021-11-22 13:54
閱讀 3435·2021-11-15 11:37
閱讀 3598·2021-10-14 09:43
閱讀 3496·2021-09-09 11:52
閱讀 3595·2019-08-30 15:53
閱讀 2457·2019-08-30 13:50
閱讀 2054·2019-08-30 11:07
閱讀 884·2019-08-29 16:32
