title: How to use drag and drop gesture in SwiftUI?
body: <p>I am trying to make a program by using SwiftUI in which you can just drag a bunch of squares along. Here, there are two squares namely X and Y.  </p>
  
  <p>Everything works fine until you drag the squares along. After you drag and drop the first square the second square immediately follows it. I am not sure why this happens. I tried making every single constant and variable in these squares different but still after you drag and drop one of the squares the second just follows along.</p>
  
  <p>My code is: </p>
  
  <pre class="lang-swift prettyprint-override"><code>struct DemoSceneKit: View {
  
      enum DragState {
          case inactive
          case pressing
          case dragging(translation: CGSize)
          case dragging2(translation2: CGSize)
  
          var translation: CGSize {
              switch self {
              case .inactive, .pressing, .dragging2:
                  return .zero
              case .dragging(let translation):
                  return translation
              }
          }
  
          var translation2: CGSize {
              switch self {
              case .inactive, .pressing, .dragging:
                  return .zero
              case .dragging2(let translation2):
                  return translation2
              }
          }
  
          var isActive: Bool {
              switch self {
              case .inactive:
                  return false
              case .pressing, .dragging, .dragging2:
                  return true
              }
          }
  
          var isDragging: Bool {
              switch self {
              case .inactive, .pressing:
                  return false
              case .dragging, .dragging2:
                  return true
              }
          }
      }
  
      @GestureState var dragState2 = DragState.inactive
      @GestureState var dragState = DragState.inactive
      @State var viewState = CGSize.zero
  
      var body: some View {
  
          //First Square
  
          let minimumLongPressDuration = 0.2
          let longPressDrag = LongPressGesture(minimumDuration: minimumLongPressDuration)
              .sequenced(before: DragGesture())
              .updating($dragState) { value, state, transaction in
                  switch value {
                  // Long press begins.
                  case .first(true):
                      state = .pressing
                  // Long press confirmed, dragging may begin.
                  case .second(true, let drag):
                      state = .dragging(translation: drag?.translation ?? .zero)
                  // Dragging ended or the long press cancelled.
                  default:
                      state = .inactive
                  }
          }
          .onEnded { value in
              guard case .second(true, let drag?) = value else { return }
              self.viewState.width += drag.translation.width
              self.viewState.height += drag.translation.height
          }
  
          //Second square
  
          let longPressDrag2 = LongPressGesture(minimumDuration: minimumLongPressDuration)
              .sequenced(before: DragGesture())
              .updating($dragState2) { value, state, transaction in
                  switch value {
                  // Long press begins.
                  case .first(true):
                      state = .pressing
                  // Long press confirmed, dragging may begin.
                  case .second(true, let drag2):
                      state = .dragging2(translation2: drag2?.translation ?? .zero)
                  // Dragging ended or the long press cancelled.
                  default:
                      state = .inactive
                  }
          }
          .onEnded { value in
              guard case .second(true, let drag2?) = value else { return }
              self.viewState.width += drag2.translation.width
              self.viewState.height += drag2.translation.height
          }
  
          return
              ZStack{
  
              // First Square
  
                  Rectangle()
                      .stroke(Color.white, lineWidth: 5)
                      .frame(width: 100, height: 100)
                      .offset(
                          x: viewState.width + dragState.translation.width,
                          y: viewState.height + dragState.translation.height
                  )
                      .gesture(longPressDrag)
  
                  Text("X")
                      .offset(x: viewState.width + dragState.translation.width,
                              y: viewState.height + dragState.translation.height
                  )
                      .gesture(longPressDrag)
                      .frame(width:200, height: 200)
  
                // Second Square  
  
                  ZStack{
                      Rectangle()
                          .stroke(Color.blue, lineWidth: 5)
                          .frame(width: 100, height: 100)
                          .position(x: 350, y: 300)
                          .offset(
                              x: viewState.width + dragState2.translation.width,
                              y: viewState.height + dragState2.translation.height
                      )
                          .gesture(longPressDrag2)
  
                      Text("Y")
                          .offset(x: viewState.width + dragState2.translation.width,
                                  y: viewState.height + dragState2.translation.height
                      )
                          .gesture(longPressDrag2)
                          .frame(width:400, height: 300)
                          .position(x: 350, y: 300)
                  }
          }
      }
  }
  </code></pre>
  
  <p>Please help me with this code.</p>