今天給大家?guī)?lái)拖放功能的詳細(xì)拆解，希望給做B端設(shè)計(jì)的朋友能帶來(lái)幫助，喜歡的話請(qǐng)一鍵三連哦~~
 
1?? 什么是拖放 ？
拖放(drag and drop)指用戶(hù)選中圖片、列表項(xiàng)或卡片等元素，拖放到頁(yè)面的其他位置或其他產(chǎn)品中。在移動(dòng)端表現(xiàn)為長(zhǎng)按拖動(dòng)，在PC端表現(xiàn)為單擊并用鼠標(biāo)拖動(dòng)，最后放到目標(biāo)位置上。
 
2?? 拖放的使用場(chǎng)景
拖放功能的設(shè)計(jì)非常多樣化，但最常見(jiàn)的使用場(chǎng)景為以下兩種：移動(dòng)放置和重新排序。
 
3?? 拖放的各個(gè)狀態(tài)
拖放的交互可分為拖放前、拖放中、拖放后三個(gè)過(guò)程。
 
拖動(dòng)前，被拖動(dòng)的元素處于初始化的狀態(tài)。常用做法是在列表或者卡片上展示代表拖放的icon，告訴用戶(hù)這些元素支持拖動(dòng)。在PC端，當(dāng)鼠標(biāo)懸停時(shí)，還可以通過(guò)改變鼠標(biāo)的樣式(抓手、指針等)，告訴用戶(hù)項(xiàng)目可以拖動(dòng)。同時(shí)增加懸浮狀態(tài)，能更好地表達(dá)拖動(dòng)的意思。當(dāng)鼠標(biāo)點(diǎn)擊或在手機(jī)上按下要拖動(dòng)的元素時(shí)，被拖動(dòng)的元素也會(huì)有一個(gè)抓取的狀態(tài)變化，比如列表增加陰影等，表明抓取到了可拖動(dòng)的元素。
 
拖放中，通過(guò)鼠標(biāo)或手指移動(dòng)，被拖動(dòng)的元素也會(huì)跟著移動(dòng)，進(jìn)而將元素拖動(dòng)到指定的位置上。
 
拖放完成后，可以直接顯示一個(gè)拖放成功的提示，清晰地告知用戶(hù)操作成功。
 
以上內(nèi)容希望大家喜歡，如有任何問(wèn)題可以評(píng)論區(qū)交流，讓我們一起進(jìn)步吧~~
一定要記得點(diǎn)贊、收藏、關(guān)注哈
 
圖中引用案例來(lái)源于日常收集