SwiftUI拖拽元素未立即消失：移至目标中心延迟消失问题

问题现象 #

在Xcode 16、iOS 18环境下实现SwiftUI拖拽功能时，拖拽元素被放下后，会先以动画形式移动到放置目标的中心，停留约一秒后才消失，不符合预期的立即消失效果。

问题代码 #

@State var message = "Drop It Like It's Hot"
var body: some View {
    HStack {
        HStack {
            Text(message).padding(50)
            Spacer()
        }
        .frame(width: 300)
        .background(.green)
        .dropDestination(for: String.self) { items, location in
            if let item = items.first {
                message = item
            }
            return true
        }

        VStack {
            Text("Item 1").padding(50).draggable("Item 1")
            Text("Item 2").padding(50).draggable("Item 2")
            Text("Item 3").padding(50).draggable("Item 3")
        }
    }
}

原因分析 #

这是iOS 18（SwiftUI 6）新增的默认拖拽预览行为：当使用无自定义预览的draggable(_:)方法时，系统会自动生成一个与源视图一致的预览视图，并且在拖拽完成后执行这个"归位到放置目标中心"的动画，作为默认的交互反馈。

修复方案 #

通过为draggable添加自定义预览视图，覆盖系统默认的预览行为，即可让拖拽元素在放下后立即消失。修改后的代码如下：

@State var message = "Drop It Like It's Hot"
var body: some View {
    HStack {
        HStack {
            Text(message).padding(50)
            Spacer()
        }
        .frame(width: 300)
        .background(.green)
        .dropDestination(for: String.self) { items, location in
            if let item = items.first {
                message = item
            }
            return true
        }

        VStack {
            // 为每个draggable添加自定义预览
            Text("Item 1")
                .padding(50)
                .draggable("Item 1") {
                    Text("Item 1").padding(50)
                }
            
            Text("Item 2")
                .padding(50)
                .draggable("Item 2") {
                    Text("Item 2").padding(50)
                }
            
            Text("Item 3")
                .padding(50)
                .draggable("Item 3") {
                    Text("Item 3").padding(50)
                }
        }
    }
}

你也可以根据需求自定义预览视图的样式，只要明确指定了预览内容，系统就不会启用默认的归位动画。

内容的提问来源于stack exchange，提问作者Tieme