博客 / 詳情

返回

基於 CSS Grid 的簡易拖拉拽 Vue3 組件,從代碼到NPM發佈(3)- 小結

基本完成了拖動、調整大小、拖入、拖出、嵌套、刪除等特性,可以基於組件嵌套,也可以基於數據結構嵌套。算是告一段落了,後面在使用過程發現問題解決問題好了。

請大家動動小手,給我一個免費的 Star 吧~

大家如果發現了 Bug,歡迎來提 Issue 喲~

github源碼

NPM

示例地址

文檔

交互細節

拖動

基本拖動

在這裏插入圖片描述

拖動區域擴展

在這裏插入圖片描述

拖動目標判斷

在這裏插入圖片描述

調整大小

基本調整大小

在這裏插入圖片描述

調整區域擴展

在這裏插入圖片描述

拖入

從外部拖入(設置了默認佔用空間)

在這裏插入圖片描述

拖入區域擴展

在這裏插入圖片描述

跨嵌套拖入

在這裏插入圖片描述

拖出

跨嵌套拖出

在這裏插入圖片描述

嵌套

層層嵌套

在這裏插入圖片描述

刪除

躲避選中

在這裏插入圖片描述

間隙不足偏移

在這裏插入圖片描述

數據同步

在這裏插入圖片描述

歷時2周業餘時間,基本完成設想的“粗放型”拖拉拽交互組件,希望有助於有類似需求的小夥伴們~

More Stars please!勾勾手指~

github源碼

NPM

示例地址

文檔

user avatar jianqiangdepaobuxie 頭像 light_5cfbb652e97ce 頭像 fehaha 頭像 lihaixing 頭像 shengmingbuxi_5c1152527848f 頭像 xiaojt 頭像 niaonao 頭像
7 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.