I’m implementing drag and drop for gadgets in a lazyVgrid for which I’m utilizing .draggable and .dropDestination
Proper now whereas I’m dragging an merchandise I see its preview and in addition the merchandise itself within the grid. I would like that solely the dragging preview needs to be seen and the unique merchandise ought to disappear from the grid till I’ve dropped it at some acceptable place. Picture exhibiting the preview for the blue dragged merchandise exhibiting each of them seem collectively
ScrollView{
LazyVGrid(columns: columns, spacing:10, content material: {
ForEach(colours, id:.self){ shade in
GeometryReader{
let measurement = $0.measurement
RoundedRectangle(cornerRadius: /*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/)
.fill(shade.gradient)
.draggable(shade){
RoundedRectangle(cornerRadius: 25.0)
.fill(.ultraThinMaterial)
.body(width: measurement.width, top: measurement.top)
.onAppear {
draggingItem = shade
print(measurement)
}
}
.dropDestination(for: Shade.self) {gadgets,location in
return false
} isTargeted: { standing in
if let draggingItem, standing, draggingItem != shade {
if let sourceIndex = colours.firstIndex(of: draggingItem),
let destinationIndex = colours.firstIndex(of: shade){
withAnimation(.bouncy){
let sourceItem = colours.take away(at: sourceIndex)
colours.insert(sourceItem, at: destinationIndex)
print(colours)
}
}
}
// print(standing)
}
}
.body(width: 120, top: 120)