title: SwiftUI | onDrag - customize (dragItem) preview image appearance
body: <p>I've been wondering if there is any way to customize the <code>preview image</code> of the <code>view</code> that's being dragged when using <code>onDrag</code>?</p>
  <img src="https://i.stack.imgur.com/vyP0u.gif" width="200">
  <p>As you might see, the <code>preview image</code> is by default a slightly bigger opacity image of the view.</p>
  <p>From what I have found, a <code>preview image</code> is generated at the very beginning of the dragging process. But I couldn't find a way to change it.</p>
  <p>What I mean by customizing is to have some custom <code>image</code> or a <code>preview image</code> of a custom <code>view</code>. (Both without the default opacity)</p>
  <p>Does anyone have an idea?</p>
  <p>I have tried to use <a href="https://developer.apple.com/documentation/foundation/nsitemprovider/1403904-previewimagehandler" rel="noreferrer">previewImageHandler</a> and in general, read a lot about the <code>NSItemProvider</code>. But for me, it seems like this is something that is not possible for SwiftUI yet?</p>
  <p>With <code>UIKit</code> one could have just customized the <code>UIDragItem</code> - something like that using <code>previewProvider</code>: <a href="https://stackoverflow.com/questions/45140854/custom-view-for-drag-and-drop">Here</a></p>
  <p>Here is my demo code:</p>
  <pre><code>struct ContentView: View {
      
      var body: some View {
          DraggedView()
              .onDrag({ NSItemProvider() })
      }
      
      
      private struct DraggedView: View {
      
          var body: some View {
              RoundedRectangle(cornerRadius: 20)
                  .frame(width: 120, height: 160)
                  .foregroundColor(.green)
          }
      }
  }
  </code></pre>
  <p>I will use this for drag and drop within a <code>LazyVGrid</code>, so custom <code>gestures</code> are unfortunately no option.</p>
  <p>One second idea I had would be to have a gesture simultaneously that first changes the <code>item</code> to be dragged to something else and then <code>onDrag</code> starts and returns the <code>NSItemProvider</code> with the <code>preview image</code> which would be then the one I would want. But I couldn't have those two gestures go at the same time, you would have to dismiss one first in order to start the second.</p>
  <p>Thank you!</p>