拖放功能从0到1详解！一次搞懂B端交互难题！

今天给大家带来拖放功能的详细拆解，希望给做B端设计的朋友能带来帮助，喜欢的话请一键三连哦~~
 
1️⃣ 什么是拖放 ？
拖放(drag and drop)指用户选中图片、列表项或卡片等元素，拖放到页面的其他位置或其他产品中。在移动端表现为长按拖动，在PC端表现为单击并用鼠标拖动，最后放到目标位置上。
 
2️⃣ 拖放的使用场景
拖放功能的设计非常多样化，但最常见的使用场景为以下两种：移动放置和重新排序。
 
3️⃣ 拖放的各个状态
拖放的交互可分为拖放前、拖放中、拖放后三个过程。
 
拖动前，被拖动的元素处于初始化的状态。常用做法是在列表或者卡片上展示代表拖放的icon，告诉用户这些元素支持拖动。在PC端，当鼠标悬停时，还可以通过改变鼠标的样式(抓手、指针等)，告诉用户项目可以拖动。同时增加悬浮状态，能更好地表达拖动的意思。当鼠标点击或在手机上按下要拖动的元素时，被拖动的元素也会有一个抓取的状态变化，比如列表增加阴影等，表明抓取到了可拖动的元素。
 
拖放中，通过鼠标或手指移动，被拖动的元素也会跟着移动，进而将元素拖动到指定的位置上。
 
拖放完成后，可以直接显示一个拖放成功的提示，清晰地告知用户操作成功。
 
以上内容希望大家喜欢，如有任何问题可以评论区交流，让我们一起进步吧~~
一定要记得点赞、收藏、关注哈
 
图中引用案例来源于日常收集